@charset "UTF-8";

/* ===========================================================
   FlexClip 比較ミニサイト 共通スタイル
   外部フォント・外部CSS・JavaScriptライブラリは使用しない
   =========================================================== */

:root{
  --ink:#101a22;
  --ink-soft:#3d4b55;
  --ink-faint:#6f7c85;
  --paper:#eef0ec;
  --card:#ffffff;
  --line:#d3d8d2;
  --line-strong:#101a22;
  --signal:#f2b705;
  --link:#0f5f6b;
  --link-hover:#0a4048;
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","MS PMincho",serif;
  --sans:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Courier New",monospace;
  --measure:44rem;
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
}

img{max-width:100%;height:auto;}

a{color:var(--link);text-decoration:underline;text-underline-offset:.18em;}
a:hover{color:var(--link-hover);}
a:focus-visible{outline:3px solid var(--signal);outline-offset:2px;}

/* ---------- ヘッダー ---------- */

.site-head{
  background:var(--ink);
  color:var(--paper);
  border-bottom:4px solid var(--signal);
}
.site-head__inner{
  max-width:var(--measure);
  margin:0 auto;
  padding:1.1rem 1.25rem;
}
.site-title{
  margin:0;
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:600;
  letter-spacing:.04em;
}
.site-title a{color:var(--paper);text-decoration:none;}
.site-tagline{
  margin:.2rem 0 0;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:#9fb0b8;
  line-height:1.6;
}
.site-nav{
  border-top:1px solid #2b3a45;
  margin-top:.9rem;
  padding-top:.7rem;
}
.site-nav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;
}
.site-nav a{
  color:#cfd8d3;
  text-decoration:none;
  font-size:.84rem;
  letter-spacing:.03em;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:var(--signal);
}

/* ---------- レイアウト ---------- */

main{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 1.25rem 4rem;
}

.breadcrumb{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--ink-faint);
  padding:1rem 0 .2rem;
}
.breadcrumb a{color:var(--ink-faint);}

.disclosure{
  margin:1rem 0 1.6rem;
  padding:.7rem .9rem;
  border:1px solid var(--line);
  background:var(--card);
  font-size:.8rem;
  line-height:1.75;
  color:var(--ink-soft);
}

/* ---------- 見出し ---------- */

h1{
  font-family:var(--serif);
  font-size:1.85rem;
  line-height:1.5;
  font-weight:600;
  letter-spacing:.01em;
  margin:.6rem 0 .4rem;
}
.lede{
  font-size:1rem;
  color:var(--ink-soft);
  margin:0 0 1.6rem;
}
.updated{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.08em;
  color:var(--ink-faint);
  margin:0 0 1.8rem;
}

h2{
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.6;
  font-weight:600;
  margin:3rem 0 .2rem;
}
h3{
  font-size:1.02rem;
  font-weight:700;
  margin:2rem 0 .4rem;
  letter-spacing:.02em;
}
h4{font-size:.95rem;margin:1.4rem 0 .3rem;}

/* 署名要素：見出し下のセグメントバー（複数モデルの並列という主題の記号） */
.seg{
  display:flex;gap:3px;
  margin:0 0 1.1rem;
}
.seg i{
  display:block;height:4px;width:14px;background:var(--line-strong);
}
.seg i:nth-child(1){width:34px;background:var(--signal);}
.seg i:nth-child(n+5){background:var(--line);}

p{margin:0 0 1.2rem;}

/* ---------- 目次 ---------- */

.toc{
  border:1px solid var(--line);
  background:var(--card);
  padding:1rem 1.2rem;
  margin:0 0 2.4rem;
}
.toc h2{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  margin:0 0 .6rem;
  color:var(--ink-faint);
}
.toc ol{margin:0;padding-left:1.3rem;}
.toc li{margin:.15rem 0;font-size:.92rem;}

/* ---------- 判定ボックス ---------- */

.verdict{
  border:2px solid var(--ink);
  background:var(--card);
  padding:1.2rem 1.3rem .4rem;
  margin:0 0 2rem;
}
.verdict__label{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--ink-faint);
  margin:0 0 .4rem;
}
.verdict p:last-child{margin-bottom:1rem;}

/* ---------- 表 ---------- */

.table-scroll{
  overflow-x:auto;
  margin:0 0 1.6rem;
  border:1px solid var(--line);
  background:var(--card);
}
table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-size:.88rem;
  line-height:1.7;
}
caption{
  text-align:left;
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--ink-faint);
  padding:.7rem .9rem 0;
}
th,td{
  border-bottom:1px solid var(--line);
  padding:.6rem .9rem;
  text-align:left;
  vertical-align:top;
}
thead th{
  background:var(--ink);
  color:var(--paper);
  font-weight:600;
  border-bottom:none;
  white-space:nowrap;
}
tbody th{
  font-weight:600;
  background:#f6f7f4;
  white-space:nowrap;
}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none;}

/* ---------- CTA ---------- */

.cta{
  border:1px solid var(--line);
  border-left:6px solid var(--signal);
  background:var(--card);
  padding:1.1rem 1.2rem;
  margin:2rem 0;
}
.cta p{margin:0 0 .7rem;font-size:.93rem;}
.cta p:last-child{margin-bottom:0;}
.cta a{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:.95rem;
  padding:.7rem 1.4rem;
  line-height:1.5;
}
.cta a:hover{background:#25333d;color:var(--signal);}
.cta a img{display:block;}
.cta a:has(img){background:none;padding:0;}
.cta .sub{
  font-size:.78rem;
  color:var(--ink-faint);
  margin:.6rem 0 0;
}

.ad{
  overflow-x:auto;
  margin:2rem 0;
  padding:.2rem 0;
}

/* ---------- 注記 ---------- */

.note{
  border-left:3px solid var(--ink-faint);
  padding:.2rem 0 .2rem .9rem;
  margin:0 0 1.4rem;
  font-size:.88rem;
  color:var(--ink-soft);
}
.note strong{color:var(--ink);}

.todo{
  border:2px dashed #b04a2f;
  background:#fdf6f3;
  padding:1rem 1.1rem;
  margin:0 0 1.6rem;
  font-size:.88rem;
}
.todo p:first-child{font-weight:700;margin-bottom:.5rem;}

ul,ol{margin:0 0 1.3rem;padding-left:1.4rem;}
li{margin:.25rem 0;}

.faq dt{font-weight:700;margin:1.4rem 0 .3rem;}
.faq dd{margin:0 0 1rem;}

/* ---------- 関連リンク ---------- */

.related{
  border-top:2px solid var(--ink);
  margin-top:3.5rem;
  padding-top:1rem;
}
.related h2{margin-top:0;font-size:1.1rem;}
.related ul{list-style:none;padding:0;}
.related li{border-bottom:1px solid var(--line);padding:.55rem 0;}
.related a{text-decoration:none;font-weight:600;font-size:.95rem;}
.related span{display:block;font-size:.8rem;color:var(--ink-faint);font-weight:400;}

/* ---------- フッター ---------- */

.site-foot{
  background:var(--ink);
  color:#9fb0b8;
  padding:2rem 1.25rem 2.6rem;
  font-size:.82rem;
}
.site-foot__inner{max-width:var(--measure);margin:0 auto;}
.site-foot a{color:#cfd8d3;}
.site-foot ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;}

/* ---------- 応答 ---------- */

@media (max-width:600px){
  body{font-size:16px;}
  h1{font-size:1.5rem;}
  h2{font-size:1.2rem;}
  main{padding-bottom:3rem;}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

@media print{
  .site-nav,.cta,.ad,.site-foot{display:none;}
  body{background:#fff;}
}

/* ===========================================================
   追加分：ハンバーガーメニュー／サイト内検索／この記事を書いた人
   =========================================================== */

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- ヘッダー上段（サイト名＋メニューボタン） ---------- */

.site-head__bar{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
}

.nav-toggle{
  display:none;
  align-items:center;gap:.45rem;
  background:none;
  border:1px solid #3a4a55;
  color:var(--paper);
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.12em;
  line-height:1;
  padding:.55rem .7rem;
  cursor:pointer;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded="true"]{border-color:var(--signal);color:var(--signal);}
.nav-toggle__bars{display:block;width:16px;}
.nav-toggle__bars i{display:block;height:2px;background:currentColor;margin:3px 0;}

/* ---------- メニュー本体（ナビ＋検索） ---------- */

.site-menu{
  border-top:1px solid #2b3a45;
  margin-top:.9rem;
  padding-top:.7rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem 1.2rem;
}
.site-nav{border-top:none;margin-top:0;padding-top:0;}

/* ---------- サイト内検索 ---------- */

.site-search{position:relative;display:flex;gap:.35rem;flex:0 1 15rem;}
.site-search input[type="search"]{
  flex:1 1 auto;min-width:0;
  background:#182530;
  border:1px solid #3a4a55;
  color:var(--paper);
  font-family:var(--sans);
  font-size:.82rem;
  padding:.42rem .6rem;
  border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.site-search input[type="search"]::placeholder{color:#7f8f99;}
.site-search input[type="search"]:focus{outline:2px solid var(--signal);outline-offset:1px;}
.site-search button{
  background:var(--signal);
  color:var(--ink);
  border:none;
  font-family:var(--sans);
  font-weight:700;
  font-size:.78rem;
  padding:.42rem .85rem;
  cursor:pointer;
}
.site-search button:hover{background:#ffc82c;}

.site-search__panel{
  position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:30;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--ink);
  max-height:62vh;overflow-y:auto;
  box-shadow:0 12px 30px rgba(16,26,34,.28);
}
.site-search__panel ul{list-style:none;margin:0;padding:0;}
.site-search__panel li{border-bottom:1px solid var(--line);margin:0;}
.site-search__panel li:last-child{border-bottom:none;}
.site-search__panel a{display:block;padding:.55rem .8rem;text-decoration:none;color:var(--ink);}
.site-search__panel a:hover{background:#f6f7f4;}
.site-search__panel .r-title{display:block;font-weight:700;font-size:.86rem;line-height:1.55;}
.site-search__panel .r-desc{display:block;font-size:.75rem;color:var(--ink-faint);line-height:1.6;}
.site-search__empty{margin:0;padding:.6rem .8rem;font-size:.8rem;color:var(--ink-faint);}

/* ---------- 検索結果ページ ---------- */

.search-form{display:flex;gap:.4rem;margin:0 0 1.4rem;max-width:26rem;}
.search-form input[type="search"]{
  flex:1 1 auto;min-width:0;
  border:1px solid var(--ink);
  background:var(--card);
  color:var(--ink);
  font-family:var(--sans);
  font-size:.95rem;
  padding:.5rem .7rem;
  border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.search-form button{
  background:var(--ink);color:#fff;border:none;
  font-weight:700;font-size:.9rem;padding:.5rem 1.1rem;cursor:pointer;
}
.search-form button:hover{background:#25333d;color:var(--signal);}
.search-summary{font-size:.85rem;color:var(--ink-faint);margin:0 0 1rem;}
.results{list-style:none;padding:0;margin:0 0 2rem;}
.results li{border-bottom:1px solid var(--line);padding:.85rem 0;margin:0;}
.results a{font-weight:700;font-size:1rem;text-decoration:none;}
.results p{margin:.2rem 0 0;font-size:.84rem;color:var(--ink-soft);}
.results .r-url{display:block;font-family:var(--mono);font-size:.7rem;color:var(--ink-faint);margin-top:.2rem;}

/* ---------- この記事を書いた人 ---------- */

.author{
  border:1px solid var(--line);
  border-top:4px solid var(--ink);
  background:var(--card);
  margin:3rem 0 0;
  padding:1.1rem 1.2rem;
}
.author__kicker{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--ink-faint);
  margin:0 0 .8rem;
}
.author__body{display:flex;gap:1rem;align-items:flex-start;}
.author__avatar{
  flex:0 0 84px;width:84px;height:84px;
  object-fit:cover;
  border:1px solid var(--line);
  background:var(--paper);
}
.author__name{font-family:var(--serif);font-size:1.15rem;font-weight:600;margin:0;}
.author__role{font-size:.8rem;color:var(--ink-faint);margin:.1rem 0 .7rem;}
.author__body p{font-size:.88rem;margin:0 0 .7rem;}
.author__links{font-size:.8rem;margin:0;}

/* ---------- プロフィール（運営者情報ページ） ---------- */

.profile{display:flex;gap:1.2rem;align-items:flex-start;margin:0 0 1.6rem;}
.profile img{
  flex:0 0 110px;width:110px;height:110px;
  object-fit:cover;border:1px solid var(--line);
}

/* ---------- 検証中の枠 ---------- */

.pending{
  border:1px solid var(--line);
  border-left:6px solid var(--ink-faint);
  background:var(--card);
  padding:1rem 1.1rem;
  margin:0 0 1.6rem;
  font-size:.88rem;
}
.pending__label{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--ink-faint);
  margin:0 0 .5rem;
}
.pending ul{margin:0 0 .9rem;}
.pending p:last-child{margin-bottom:0;}
.pending__note{font-size:.8rem;color:var(--ink-faint);}

/* ---------- フッター追記 ---------- */

.site-foot__copy{margin-top:1rem;font-size:.76rem;}
.site-foot__copy a{text-decoration:none;}

/* ---------- 応答（追加分） ---------- */

@media (max-width:700px){
  .site-menu{display:block;}
  .nav-toggle{display:inline-flex;}
  html.js .site-menu{display:none;}
  html.js .site-menu.open{display:block;}
  .site-nav ul{flex-direction:column;gap:0;}
  .site-nav li{border-bottom:1px solid #2b3a45;margin:0;}
  .site-nav li:last-child{border-bottom:none;}
  .site-nav a{display:block;padding:.6rem 0;font-size:.9rem;}
  .site-search{margin-top:.8rem;flex:1 1 auto;}
}

@media (max-width:600px){
  .author__body{gap:.8rem;}
  .author__avatar{flex:0 0 64px;width:64px;height:64px;}
  .profile{gap:.9rem;}
  .profile img{flex:0 0 80px;width:80px;height:80px;}
}

@media print{
  .nav-toggle,.site-search,.site-menu{display:none;}
}

/* ===========================================================
   AI動画サービス比較サイト用
   FlexClip比較ノートと同じ紙面・配色・角のない設計を継承
   =========================================================== */

.catalog-site .site-head__inner,
.catalog-site .site-foot__inner{
  max-width:var(--measure);
}

.catalog-main{
  max-width:var(--measure);
}

.catalog-main .container,
.catalog-main .narrow{
  width:100%;
  max-width:none;
  margin:0;
}

.catalog-intro{
  max-width:var(--measure);
}

.catalog-intro h1{
  margin-top:.6rem;
}

.intro-actions,
.button-group,
.card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  align-items:center;
}

.btn{
  display:inline-block;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--ink);
  color:#fff;
  padding:.65rem 1.1rem;
  font-size:.88rem;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  text-decoration:none;
}

.btn:hover{
  background:#25333d;
  color:var(--signal);
}

.btn-secondary{
  background:var(--card);
  color:var(--ink);
}

.btn-secondary:hover{
  background:#f6f7f4;
  color:var(--link-hover);
}

.btn-text{
  border-color:transparent;
  background:transparent;
  color:var(--link);
  text-decoration:underline;
  text-underline-offset:.18em;
}

.btn-text:hover{
  background:transparent;
  color:var(--link-hover);
}

.top-picks{
  border:1px solid var(--line);
  background:var(--card);
  padding:1rem 1.1rem;
  margin:0 0 2rem;
}

.top-picks__label{
  margin:0 0 .6rem;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
}

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

.hero-pick-wrap{min-width:0;}

.hero-pick{
  display:flex;
  min-height:4.3rem;
  align-items:center;
  justify-content:space-between;
  gap:.7rem;
  border:1px solid var(--ink);
  border-left:5px solid var(--signal);
  background:var(--card);
  color:var(--ink);
  padding:.65rem .75rem;
  text-decoration:none;
}

.hero-pick:hover{
  background:#f6f7f4;
  color:var(--link-hover);
}

.hero-pick span{display:grid;min-width:0;}
.hero-pick strong{font-family:var(--serif);font-size:1rem;line-height:1.4;}
.hero-pick small{color:var(--ink-faint);font-size:.72rem;line-height:1.45;}
.hero-pick b{flex:0 0 auto;font-family:var(--mono);font-size:.68rem;}

.section{
  padding:1.2rem 0 2.4rem;
}

.section-alt{
  margin-inline:-1.25rem;
  padding-inline:1.25rem;
  background:#e7eae5;
}

.section-heading{
  max-width:var(--measure);
  margin:0 0 1rem;
}

.section-heading .eyebrow,
.page-hero .eyebrow{
  margin:0 0 .2rem;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
}

.section-heading h2,
.detail-page h2{
  margin:.2rem 0 .3rem;
}

.section-heading h2::after{
  display:block;
  width:4.6rem;
  height:4px;
  margin-top:.5rem;
  background:linear-gradient(90deg,var(--signal) 0 48%,var(--ink) 48% 66%,var(--line) 66%);
  content:"";
}

.section-heading p:last-child{
  margin:.45rem 0 0;
  color:var(--ink-soft);
  font-size:.9rem;
}

.catalog-controls{
  border:1px solid var(--line);
  border-top:3px solid var(--ink);
  background:var(--card);
  padding:1rem;
  margin:0 0 1rem;
}

.search-box{
  display:grid;
  gap:.35rem;
  max-width:30rem;
  color:var(--ink-soft);
  font-size:.8rem;
  font-weight:700;
}

.search-box input{
  width:100%;
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--card);
  color:var(--ink);
  padding:.55rem .7rem;
  font:inherit;
  font-size:.9rem;
}

.search-box input:focus{
  outline:3px solid var(--signal);
  outline-offset:1px;
}

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.8rem;
}

.filter-chip{
  border:1px solid var(--ink);
  border-radius:0;
  background:var(--card);
  color:var(--ink);
  padding:.4rem .7rem;
  font:inherit;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
}

.filter-chip:hover,
.filter-chip.is-active{
  background:var(--ink);
  color:var(--signal);
}

.result-count{
  margin:.7rem 0 0;
  color:var(--ink-faint);
  font-family:var(--mono);
  font-size:.72rem;
}

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

.service-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  border:1px solid var(--line);
  border-top:4px solid var(--ink);
  border-radius:0;
  background:var(--card);
  padding:1rem;
  box-shadow:none;
}

.card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.7rem;
}

.service-card h3{
  margin:.4rem 0 .2rem;
  font-family:var(--serif);
  font-size:1.2rem;
  line-height:1.4;
}

.service-card h3 a{color:var(--ink);text-decoration:none;}
.service-card h3 a:hover{color:var(--link-hover);}
.service-card>p{font-size:.86rem;line-height:1.7;color:var(--ink-soft);}

.badge{
  display:inline-block;
  border:1px solid var(--line);
  border-radius:0;
  background:#f6f7f4;
  color:var(--ink-soft);
  padding:.18rem .45rem;
  font-family:var(--mono);
  font-size:.64rem;
  line-height:1.5;
}

.status{
  flex:0 0 auto;
  background:#eceeea;
  color:var(--ink-faint);
  padding:.18rem .38rem;
  font-family:var(--mono);
  font-size:.62rem;
  line-height:1.5;
}

.status.verified{background:#e2ece7;color:#315849;}

.mini-spec{
  margin:.4rem 0 .7rem;
  border-top:1px solid var(--line);
}

.mini-spec div{
  display:grid;
  grid-template-columns:5rem 1fr;
  gap:.55rem;
  padding:.35rem 0;
  border-bottom:1px solid var(--line);
}

.mini-spec dt{color:var(--ink-faint);font-size:.72rem;font-weight:700;}
.mini-spec dd{margin:0;font-size:.78rem;}
.models{font-size:.78rem!important;}

.feature-list{
  display:flex;
  flex-wrap:wrap;
  gap:.3rem;
  margin:.2rem 0 0;
  padding:0;
  list-style:none;
}

.feature-list li{
  margin:0;
  background:#eceeea;
  color:var(--ink-soft);
  padding:.15rem .4rem;
  font-size:.68rem;
}

.card-actions{
  margin-top:auto;
  padding-top:1rem;
}

.card-actions .btn{flex:1 1 10rem;}
.empty-state{border:1px solid var(--line);background:var(--card);padding:1rem;text-align:center;}

.table-wrap{
  overflow-x:auto;
  margin:0 0 1rem;
  border:1px solid var(--line);
  background:var(--card);
}

.comparison-table{min-width:58rem;}
.section-link{text-align:right;font-size:.82rem;}

.guide-grid,
.detail-grid,
.pros-cons{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
}

.guide-grid>div,
.detail-grid>section,
.pros-cons>section{
  border:1px solid var(--line);
  border-left:4px solid var(--signal);
  background:var(--card);
  padding:.8rem .9rem;
}

.guide-grid h3,
.detail-grid h2,
.pros-cons h2{margin:0 0 .3rem;font-size:1rem;}
.guide-grid p{margin:0;font-size:.82rem;color:var(--ink-soft);}

.page-hero{
  max-width:var(--measure);
  padding:0;
  background:transparent;
}

.page-hero .breadcrumb{margin:0;}
.page-hero h1{font-size:1.85rem;}
.page-hero>div>p:not(.eyebrow):not(.breadcrumb){color:var(--ink-soft);}
.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem;}
.pros-cons{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:1rem;}
.pros-cons ul,.check-list{margin:0;padding-left:1.2rem;font-size:.86rem;}
.spec-section{margin-top:2rem;}
.spec-table{min-width:34rem;}

/* 選べるモデルの一覧 */
.models-note{margin:.2rem 0 .9rem;color:var(--ink-soft);font-size:.94rem;}
.model-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:.45rem;
}
.model-list li{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--signal);
  padding:.42rem .7rem;
  font-size:.94rem;
}
.models-checked{
  margin:.85rem 0 0;
  color:var(--ink-faint);
  font-size:.86rem;
}

/* 料金のしくみ */
.pricing-detail{
  background:var(--card);
  border:1px solid var(--line);
  border-left:5px solid var(--link);
  padding:.9rem 1.1rem;
  margin:.2rem 0 0;
}
.pricing-caution{
  margin:.7rem 0 0;
  color:var(--ink-soft);
  font-size:.9rem;
}

/* トップの「条件を決めて探す」 */
.route-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:.8rem;
}
.route-card{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-top:4px solid var(--line-strong);
  padding:1rem 1.1rem;
  text-decoration:none;
  color:var(--ink);
}
.route-card:hover{border-top-color:var(--signal);}
.route-card strong{display:block;margin-bottom:.3rem;font-size:1.05rem;}
.route-card span{display:block;font-size:.92rem;color:var(--ink-soft);line-height:1.75;}

/* 切り口別ページのカード */
.topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  gap:1rem;
  margin:1rem 0 1.4rem;
}
.topic-card{
  background:var(--card);
  border:1px solid var(--line);
  border-left:5px solid var(--signal);
  padding:1rem 1.1rem;
}
.topic-card h3{margin:0 0 .2rem;font-size:1.1rem;}
.topic-card__cat{margin:0 0 .5rem;font-size:.86rem;color:var(--ink-faint);}
.topic-card p{font-size:.94rem;}

/* モデル逆引きページ */
.model-toc{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.model-toc a{
  display:inline-block;
  background:var(--card);
  border:1px solid var(--line);
  padding:.28rem .7rem;
  text-decoration:none;
  font-size:.92rem;
}
.model-toc a:hover{border-color:var(--line-strong);}
.model-block{margin-top:2.2rem;}
.model-block h2{border-bottom:2px solid var(--line-strong);padding-bottom:.35rem;}
.model-service-list{list-style:none;margin:.6rem 0 0;padding:0;}
.model-service-list li{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
  border-bottom:1px solid var(--line);
  padding:.5rem .2rem;
}
.model-service-list li span{font-size:.86rem;color:var(--ink-faint);text-align:right;}

/* 系統の下にぶら下がるモデル解説へのリンク */
.model-versions__label{
  margin:1rem 0 .35rem;
  font-size:.86rem;
  color:var(--ink-faint);
}
.model-versions{display:flex;flex-wrap:wrap;gap:.4rem;}
.model-versions a{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  padding:.28rem .75rem;
  text-decoration:none;
  font-size:.9rem;
}
.model-versions a:hover{background:var(--link);border-color:var(--link);color:#fff;}

/* モデル解説ページ */
.model-page .spec-table th{width:11rem;}
.model-page .model-service-list a{font-weight:700;}

/* PR表記（全ページ最上部・常時表示） */
.pr-bar{
  margin:0;
  background:var(--signal);
  color:var(--ink);
  font-size:.82rem;
  line-height:1.5;
  letter-spacing:.02em;
  text-align:center;
  padding:.4rem .8rem;
  border-bottom:1px solid rgba(16,26,34,.25);
}

/* トップページのモデル一覧チップ */
.model-chip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));
  gap:.5rem;
}
.model-chip{
  display:block;
  background:var(--card);
  border:1px solid var(--line);
  border-left:4px solid var(--link);
  padding:.55rem .8rem;
  text-decoration:none;
  color:var(--ink);
}
.model-chip:hover{border-left-color:var(--signal);}
.model-chip strong{display:block;font-size:.98rem;}
.model-chip span{display:block;font-size:.8rem;color:var(--ink-faint);}

/* モデル一覧ページの解説カード */
.model-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));
  gap:.9rem;
}
.model-card{
  background:var(--card);
  border:1px solid var(--line);
  border-top:4px solid var(--link);
  padding:.9rem 1rem;
}
.model-card h3{margin:0 0 .15rem;font-size:1.06rem;}
.model-card__dev{margin:0 0 .5rem;font-size:.8rem;color:var(--ink-faint);}
.model-card__sum{margin:0 0 .6rem;font-size:.9rem;line-height:1.75;}
.model-card__spec{
  margin:0;
  font-size:.82rem;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:.5rem;
}

/* サービスページのモデル一覧をリンクとして見せる */
.model-list li a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  text-decoration:none;
  color:var(--ink);
}
.model-list li a:hover{color:var(--link);text-decoration:underline;}
.model-list__go{
  flex:none;
  font-size:.72rem;
  background:var(--ink);
  color:var(--paper);
  padding:.08rem .45rem;
  border-radius:2px;
}
.model-list li a:hover .model-list__go{background:var(--link);}
.final-action{border:1px solid var(--line);border-left:6px solid var(--signal);background:var(--card);padding:1rem 1.1rem;margin-top:2rem;}
.final-action h2{margin:0 0 .3rem;}
.final-action p{font-size:.84rem;color:var(--ink-soft);}
.affiliate-pixel{width:1px;height:1px;}

@media(max-width:780px){
  .hero-picks,
  .service-grid,
  .guide-grid{grid-template-columns:1fr;}
}

@media(max-width:600px){
  .catalog-main{padding-inline:1rem;}
  .section-alt{margin-inline:-1rem;padding-inline:1rem;}
  .filter-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.3rem;}
  .filter-chip{flex:0 0 auto;}
  .card-heading{display:block;}
  .status{display:inline-block;margin-top:.3rem;}
  .detail-grid,.pros-cons{grid-template-columns:1fr;}
  .intro-actions,.button-group,.card-actions{display:grid;grid-template-columns:1fr;}
  .btn{width:100%;}
}