@charset "UTF-8";
/* =====================================================================
   career-theme  —  ドコモレッド基調 格安SIM比較デザイン
   （最後に読み込み、既存の青系CSSを上書きする）
   ===================================================================== */

:root{
  --red:#cc0000;      /* docomo red */
  --red2:#e60023;     /* vivid accent */
  --red-d:#9e0000;    /* deep */
  --red-l:#ffeaea;    /* tint */
  --red-l2:#fff5f5;
  --ink:#20242b;
  --sub:#6b7280;
  --line:#f0dede;
  --gold:#ffb300;
  --green:#16a34a;
  --bg:#ffffff;
  --soft:#fbf7f7;
  --grad:linear-gradient(135deg,#e60023 0%,#cc0000 60%,#a30016 100%);
  --grad-btn:linear-gradient(180deg,#ff2c3f 0%,#e60023 45%,#cc0000 100%);
  --shadow:0 6px 22px rgba(180,0,0,.12);
  --shadow-s:0 3px 12px rgba(0,0,0,.08);
  --radius:16px;
}

/* ---------- base reset over old theme ---------- */
/* 旧テーマの h1/h2 装飾（グレーのバー::before・青矢印::after）を全域で無効化。
   career.css 側の見出し装飾は .mainH2::after 等の独自クラスのみ使用 */
h1::before,h2:not([class*="rankIcon"])::before{display:none!important;content:none!important;}
.footerMenu h2::after{display:none!important;content:none!important;}
.footerMenu h2.footerMenu_btn::after{display:inline-block!important;content:"+"!important;color:#fff!important;float:right;}
.footerMenu h2.footerMenu_btn.footerMenu_open::after{content:"−"!important;}

body{
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--ink);
  background:var(--soft);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
.wrap{max-width:1080px;margin:0 auto;background:transparent;overflow:visible;}
a{color:var(--red-d);text-decoration:none;}
img{max-width:100%;height:auto;vertical-align:bottom;}
.sp{display:none;}
@media(max-width:768px){.sp{display:inline;}.pc{display:none!important;}}

/* container / two-col */
.container{display:flex;gap:26px;align-items:flex-start;max-width:1080px;margin:0 auto;padding:22px 16px 40px;}
.container .left{flex:1 1 auto;min-width:0;width:auto;}
.container .right{flex:0 0 300px;width:300px;}
/* トップ等: article 内に left/right が入る構造は article 自体を2カラムflexに */
@media(min-width:901px){
  .container{width:min(1080px,100%)!important;}
  .container>article{display:flex;gap:26px;align-items:flex-start;flex:1 1 auto;min-width:0;max-width:100%!important;}
  .container>article section.left{flex:1 1 auto;min-width:0;width:auto!important;float:none!important;}
  .container>article section.right{flex:0 0 300px;width:300px!important;float:none!important;}
}
/* --- モバイル: 旧float/固定幅(width:560px等)を解除し全幅スタック --- */
@media(max-width:900px){
  .container{display:block!important;padding:14px 12px 32px;}
  .container > article{width:100%!important;max-width:100%!important;margin:0!important;}
  .container .left,
  .container .right,
  section.left,
  section.right{
    width:100%!important;max-width:100%!important;float:none!important;min-width:0!important;
    box-sizing:border-box!important;
  }
  .container .right,section.right{display:block!important;margin-top:20px;}
}

/* =====================================================================
   HEADER
   ===================================================================== */
#header_logo{
  max-width:1080px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;justify-content:space-between;background:#fff;
  border-bottom:3px solid var(--red)!important;
}
.logo_box a{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--ink);font-size:22px;letter-spacing:.02em;}
.cr-logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;background:var(--grad);color:#fff;
  font-size:22px;box-shadow:var(--shadow-s);
}
.cr-logo-txt b{color:var(--red);}
.cr-logo-txt small{display:block;font-size:11px;color:var(--sub);font-weight:700;letter-spacing:.15em;}

/* PC nav */
.nav_pc{background:var(--grad);}
.nav_pc ul{max-width:1080px;margin:0 auto;display:flex;list-style:none;padding:0;}
.nav_pc li{flex:1;text-align:center;position:relative;}
.nav_pc li+li::before{content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:rgba(255,255,255,.25);}
.nav_pc a{display:block;color:#fff;font-weight:700;padding:15px 8px;font-size:15px;transition:.2s;}
.nav_pc a:hover{background:rgba(0,0,0,.12);}
@media(max-width:768px){.nav_pc{display:none;}}

/* hamburger */
.burger-btn{display:none;}
@media(max-width:768px){
  #header_logo{padding:10px 14px;}
  .logo_box a{font-size:18px;}
  .cr-logo-mark{width:38px;height:38px;font-size:18px;}
  .burger-btn{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    background:var(--grad);border:none;border-radius:10px;width:52px;height:46px;color:#fff;cursor:pointer;z-index:120;
  }
  .burger-btn .bars{position:relative;width:24px;height:16px;}
  .burger-btn .bar{position:absolute;left:0;width:24px;height:2.5px;background:#fff;border-radius:2px;transition:.3s;}
  .burger-btn .bar-top{top:0;}
  .burger-btn .bar-mid{top:7px;}
  .burger-btn .bar-bottom{top:14px;}
  .burger-btn .menu{font-size:10px;font-weight:700;}
  .header-nav{
    position:fixed;top:0;right:-84%;width:78%;max-width:320px;height:100vh;background:#fff;
    box-shadow:-8px 0 30px rgba(0,0,0,.2);z-index:115;transition:right .32s ease;padding:80px 0 0;
  }
  .header-nav.open{right:0;}
  .header-nav .nav-list{list-style:none;padding:0;margin:0;}
  .header-nav .nav-item{border-bottom:1px solid var(--line);}
  .header-nav .nav-list .nav-item a{display:block;padding:16px 22px;color:var(--ink)!important;font-weight:700;font-size:16px;background:none!important;}
  .header-nav .nav-list .nav-item a::before{content:"›";color:var(--red);margin-right:10px;font-weight:900;}
  .burger-musk{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:110;display:none;}
  body.noscroll{overflow:hidden;}
  .burger-btn .bar.cross.bar-top{top:7px;transform:rotate(45deg);}
  .burger-btn .bar.cross.bar-mid{opacity:0;}
  .burger-btn .bar.cross.bar-bottom{top:7px;transform:rotate(-45deg);}
}

/* =====================================================================
   HERO
   ===================================================================== */
h1.firstview,h1.firstView{margin:0;}
.cr-hero{
  position:relative;overflow:hidden;color:#fff;
  background:var(--grad);
  padding:34px 12px 30px;text-align:center;
}
.cr-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.22),transparent 42%),
             radial-gradient(circle at 12% 88%,rgba(0,0,0,.18),transparent 45%);
}
.cr-hero>*{position:relative;z-index:1;}
.cr-hero .tag{
  display:inline-block;background:#fff;color:var(--red);font-weight:900;
  font-size:13px;padding:5px 16px;border-radius:999px;letter-spacing:.05em;margin-bottom:14px;
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}
.cr-hero h1{font-size:clamp(26px,6vw,44px);font-weight:900;line-height:1.25;margin:0 0 6px;text-shadow:0 2px 10px rgba(0,0,0,.2);}
@media(max-width:420px){.cr-hero h1{font-size:21px;}.cr-hero .lead{font-size:13.5px;}}
.cr-hero h1 .yell{color:#ffe14d;}
.cr-hero .lead{font-size:clamp(14px,3.4vw,18px);font-weight:700;opacity:.97;margin:8px 0 0;}
.cr-hero .feats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px;}
.cr-hero .feats span{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(2px);padding:7px 15px;border-radius:999px;font-weight:700;font-size:14px;
}
.cr-hero .feats i{color:#ffe14d;margin-right:5px;}
.cr-pr{width:96%;margin:6px auto 0;color:#b9a1a1;text-align:right;font-size:12px;}

/* =====================================================================
   SECTION HEADINGS
   ===================================================================== */
.mainH2,.mainH2_2{
  position:relative;text-align:center;font-weight:900;color:var(--ink)!important;
  font-size:clamp(21px,4.6vw,28px);margin:34px 0 20px;line-height:1.35;
  background:none!important;border:none!important;padding:0!important;
  text-shadow:none!important;box-shadow:none!important;-webkit-text-stroke:0!important;
}
.mainH2::before,.mainH2_2::before{display:none!important;}
/* 旧テーマの h1/h2 装飾バー(グレー)を無効化 */
.cr-hero h1::before,.cr-hero h1::after{display:none!important;content:none!important;}
.mainH2 strong,.mainH2_2 strong{font-weight:900;color:var(--ink)!important;background:none!important;}
.mainH2::after,.mainH2_2::after{
  content:"";display:block;width:64px;height:5px;border-radius:3px;background:var(--grad);margin:12px auto 0;
}
.mainH2 .hl,.mainH2_2 .hl{color:var(--red);}
.cr-sec-lbl{
  display:block;text-align:center;color:var(--red);font-weight:900;letter-spacing:.14em;
  font-size:13px;margin-bottom:2px;
}

/* =====================================================================
   COMPARE TABLE
   ===================================================================== */
.topTable{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius);box-shadow:var(--shadow);background:#fff;}
.topTable table{width:100%;border-collapse:separate;border-spacing:0;min-width:560px;background:#fff;overflow:hidden;border-radius:var(--radius);}
.topTable th[colspan]{
  background:var(--ink);color:#fff;font-weight:800;text-align:center;padding:9px 6px;font-size:14px;letter-spacing:.03em;
}
.topTable td{
  border-bottom:1px solid var(--line);padding:12px 10px;text-align:center;font-size:14px;vertical-align:middle;line-height:1.55;
  background:#fff;width:33.33%;
}
.topTable .tr_name td{padding:14px 8px 16px;background:var(--soft);border-bottom:2px solid var(--red-l);}
.topTable .tr_name td:not(:first-child){background-image:none!important;}
.topTable .tr_name td:not(:first-child)::before{display:none!important;content:none!important;background:none!important;}
.topTable .tr_name img{max-height:46px;width:auto;margin:0 auto 6px;display:block;}
.topTable .tr_name a{color:var(--ink);font-weight:800;font-size:15px;}
/* No.1 column highlight (first td of each row) */
.topTable tr td:first-child{position:relative;background:var(--red-l2)!important;}
.topTable .tr_name td:first-child{background:linear-gradient(180deg,#fff 0,var(--red-l) 100%)!important;box-shadow:inset 0 0 0 3px var(--red);}
/* .topTable .tr_name td:first-child::before{
  content:"👑No.1"!important;position:absolute!important;top:0!important;left:50%!important;right:auto!important;bottom:auto!important;
  transform:translateX(-50%)!important;z-index:3;width:auto!important;height:auto!important;margin:0!important;
  background-color:transparent!important;background-image:var(--grad)!important;background-size:auto!important;
  color:#fff!important;font-size:11px!important;font-weight:900!important;line-height:1.4!important;
  padding:3px 12px!important;border-radius:0 0 10px 10px!important;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2)!important;
} */
.topTable .tr_name td:first-child a{padding-top:22px;display:block;}
.topTable .tr_campaign td{color:var(--red-d);font-weight:700;background:#fffafa;font-size:13px;}
.topTable .tr_campaign td:first-child{background:#fff0f0!important;}
.topTable .table_btn a{
  display:block;background:var(--grad-btn)!important;color:#fff!important;font-weight:800;padding:10px 6px;border-radius:999px!important;
  font-size:13px;box-shadow:0 4px 10px rgba(204,0,0,.3)!important;border:none!important;text-shadow:none!important;
}
.topTable .table_btn a:hover{filter:brightness(1.05);}
/* 旧CSSのブランド別カラム背景(灰/ベージュ)を無効化して統一 */
.topTable tr td:not(:first-child){background:#fff!important;}
.topTable .tr_name td:not(:first-child){background:var(--soft)!important;}
.topTable .tr_campaign td:not(:first-child){background:#fffafa!important;}
/* モバイル: 3列を横スクロールなしで収める */
@media(max-width:600px){
  .topTable table{min-width:0;}
  .topTable table tr td{padding:9px 4px!important;font-size:11.5px!important;line-height:1.55!important;letter-spacing:-.02em;}
  .topTable table tr th{font-size:13px!important;padding:8px 5px!important;}
  .topTable .tr_name img{max-height:34px;}
  .topTable .tr_name a{font-size:12.5px;}
  .topTable .tr_campaign td{font-size:11.5px;}
  .topTable .table_btn a{font-size:11px;padding:9px 4px;}
  .topTable .tr_name td:first-child::before{font-size:9.5px;padding:2px 7px;}
  .topTable .tr_name td:first-child a{padding-top:18px;}
}

/* =====================================================================
   STEPS (topColumn2)
   ===================================================================== */
.cr-steps{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s);padding:26px 20px 22px;margin:30px 0;}
.cr-steps .st-head{text-align:center;font-weight:900;font-size:clamp(18px,4vw,24px);margin:0 0 22px;line-height:1.4;}
.cr-steps .st-head b{color:var(--red);}
.cr-steps .st-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:768px){.cr-steps .st-grid{grid-template-columns:1fr 1fr;gap:12px;}}
.cr-step{position:relative;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:18px 12px 14px;text-align:center;}
.cr-step .num{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-weight:900;
  display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:var(--shadow-s);
}
.cr-step .ico{font-size:34px;color:var(--red);margin:12px 0 8px;}
.cr-step .tt{font-weight:800;font-size:15px;margin-bottom:4px;}
.cr-step .ds{font-size:12.5px;color:var(--sub);line-height:1.6;}

/* =====================================================================
   CARRIER CARDS (itemParts / ranking-top)
   ===================================================================== */
.rankTopics{margin-top:6px;}
.ranking{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 30px;overflow:hidden;border:1px solid var(--line);}
.ranking h2[class^="rankIcon"]{
  position:relative;background:var(--ink);color:#fff;font-weight:900;font-size:20px;
  padding:16px 18px 16px 78px;margin:0;line-height:1.3;
}
.ranking h2[class^="rankIcon"]::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:50px;height:50px;background-size:contain;background-repeat:no-repeat;background-position:center;
}
/* .ranking.ranking_1 h2::before{content:"1";} */
.ranking h2.rankIcon1::before,.ranking h2.rankIcon2::before,.ranking h2.rankIcon3::before{
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:900;border-radius:12px;
}
/* .ranking h2.rankIcon1::before{content:"1";background:linear-gradient(135deg,#ffcf40,#e0a400);color:#5a3d00;}
.ranking h2.rankIcon2::before{content:"2";background:linear-gradient(135deg,#d7dce3,#9aa4b2);color:#33383f;}
.ranking h2.rankIcon3::before{content:"3";background:linear-gradient(135deg,#e6b98f,#c08552);color:#4a2c10;} */
.ranking.ranking_1 h2[class^="rankIcon"]{background:var(--grad);}
.ranking.ranking_1{border:2px solid var(--red);box-shadow:0 10px 30px rgba(204,0,0,.18);}

.rankingBg{padding:20px 18px 22px;}
.cr-card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.cr-card-logo img{max-height:44px;width:auto;}
.totalPoint_block .lbl{font-weight:800;color:var(--sub);font-size:14px;margin-right:6px;}
.cr-banner{display:block;margin:0 0 14px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-s);border:1px solid var(--line);}
.cr-banner img{width:100%;display:block;}
.cr-campaign{margin:0 0 14px;background:linear-gradient(180deg,#fff6f6,#ffecec);border:1px solid var(--red-l);border-left:5px solid var(--red);border-radius:10px;padding:10px 14px;}
.cr-campaign .lbl{display:inline-block;font-weight:900;color:var(--red);font-size:13px;margin-bottom:3px;}
.cr-campaign p{margin:0;font-weight:800;font-size:15px;color:var(--red-d);line-height:1.5;}

.cr-campaign p .reference {
	font-size: 0.6em !important;
    vertical-align: super;
}


.totalPoint_block{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800;color:var(--sub);font-size:14px;margin-bottom:14px;flex-wrap:wrap;}
.totalPoint{display:inline-flex;align-items:center;gap:6px;}
.total_score{font-size:26px;font-weight:900;color:var(--red);line-height:1;}
/* star rating */
.star5_rating{
  position:relative;display:inline-block;width:5.6em!important;height:1em!important;background:none!important;line-height:1;font-size:20px;flex:none;
  --on:var(--gold);--off:#e2d6d6;
}
.star5_rating::before{content:"★★★★★";position:absolute;left:0;top:0;color:var(--off);letter-spacing:.06em;width:auto;}
.star5_rating::after{content:"★★★★★";position:absolute;left:0;top:0;color:var(--on);letter-spacing:.06em;overflow:hidden;white-space:nowrap;width:var(--rate,90%);}

/* reason / recommend points */
.reason{margin:6px 0 16px!important;padding:0!important;background:none!important;border:none!important;}
.reason h3{display:block!important;font-weight:900;font-size:16px;margin:0 0 14px!important;padding:0!important;background:none!important;border:none!important;text-shadow:none!important;box-shadow:none!important;}
.reason h3 span{display:inline-block!important;position:static!important;top:0!important;left:0!important;background:var(--grad)!important;color:#fff!important;padding:1px 18px!important;border-radius:8px!important;font-size:15px;box-shadow:var(--shadow-s);text-shadow:none!important;}
.reason h3 span::before{display:none!important;}
.reason_container,.recommend_point{font-size:15px;}
.reason_container ul,.recommend_point ul{list-style:none;padding:0;margin:0;}
.reason_container li,.recommend_point li{position:relative;padding:8px 8px 8px 34px;border-bottom:1px dashed var(--line);line-height:1.6;}
.reason_container li::before,.recommend_point li::before{
  content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--red);
  position:absolute;left:8px;top:9px;font-size:15px;
}
.reason_container p,.recommend_point p{margin:0;}

/* spec mini table */
.itemTable{width:100%;border-collapse:separate;border-spacing:0;margin:14px 0 4px;border-radius:12px;overflow:hidden;border:1px solid var(--line)!important;}
.itemTable th{background:var(--red-l)!important;color:var(--red-d)!important;font-weight:800;padding:8px 10px;font-size:13px;text-align:left;width:50%;border:1px solid var(--line)!important;}
.itemTable td{background:#fff!important;padding:10px;font-size:14px;border:1px solid var(--line)!important;vertical-align:top;line-height:1.6;color:var(--ink)!important;}
@media(max-width:600px){
  .itemTable th{font-size:12px;padding:7px 8px;}
  .itemTable td{font-size:13px;padding:8px;}
}

/* =====================================================================
   CTA BUTTON (officialBtn)
   ===================================================================== */
.cr-cta,.officialBtn a,.official_btn a,a.officialBtn{
  position:relative;display:block;max-width:520px;margin:16px auto 4px;text-align:center;
  background:var(--grad-btn)!important;color:#fff!important;font-weight:900;font-size:18px;padding:16px 20px;border-radius:999px;
  box-shadow:0 8px 20px rgba(204,0,0,.32);overflow:hidden;transition:transform .15s,filter .15s;letter-spacing:.02em;
  text-shadow:none!important;border:none!important;
}
.cr-cta small,.cr-cta .arw{color:#fff!important;}
.cr-cta:hover{transform:translateY(-2px);filter:brightness(1.05);}
.cr-cta::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:crshine 3.2s infinite;
}
@keyframes crshine{0%{left:-60%;}55%{left:130%;}100%{left:130%;}}
.cr-cta small{display:block;font-size:12px;font-weight:700;opacity:.92;margin-top:2px;}
.cr-cta .arw{margin-left:6px;}
.cr-cta-wrap{margin:16px 0 4px;}
.cr-cta-cmt{text-align:center;margin:0 0 6px;}
.cr-cta-cmt span{
  display:inline-block;position:relative;background:#fffbe6;color:var(--red-d);font-weight:800;font-size:14px;
  padding:5px 16px;border-radius:8px;border:1px dashed var(--red);
}
.cr-cta-cmt span::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--red);border-bottom:0;}

/* =====================================================================
   SIDEBAR
   ===================================================================== */
.right .rightBox{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s);overflow:hidden;margin-bottom:22px;border:1px solid var(--line);}
.sideH2{background:var(--grad)!important;color:#fff!important;font-weight:900;font-size:16px;padding:12px 16px;margin:0;display:flex;align-items:center;gap:8px;border:none!important;text-shadow:none!important;box-shadow:none!important;}
.sideH2::before,.sideH2::after{display:none!important;content:none!important;}
.rightRankBox ul{list-style:none;margin:0;padding:10px 12px;counter-reset:sr;}
.rightRankBox li{position:relative;margin-bottom:10px;counter-increment:sr;}
.rightRankBox li a{display:flex;align-items:center;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:10px 12px 10px 40px;transition:.2s;}
.rightRankBox li a:hover{border-color:var(--red);background:#fff;}
.rightRankBox li::before{
  content:counter(sr);position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:2;
  width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;font-weight:900;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.rightRankBox li:first-child::before{background:linear-gradient(135deg,#ffcf40,#e0a400);color:#5a3d00;}
.rightRankBox .sideRank_img img{width:52px;height:52px;object-fit:cover;border-radius:10px;}
.rightRankBox .sideRank_txt p{margin:0;font-weight:800;font-size:15px;color:var(--ink);}
.rightRankBox .sideRank_score{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:13px;color:var(--red);}
.rightRankBox .sideRank_score i{color:var(--gold);}

/* =====================================================================
   SIM LIST (detailList)
   ===================================================================== */
.cr-list{display:flex;flex-direction:column;gap:14px;}
.cr-list-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-s);position:relative;transition:.2s;}
.cr-list-card:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--shadow);}
.cr-list-rank{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:14px;}
.cr-list-card:nth-child(1) .cr-list-rank{background:linear-gradient(135deg,#ffcf40,#e0a400);color:#5a3d00;}
.cr-list-img{flex:0 0 96px;}
.cr-list-img img{width:96px;height:72px;object-fit:cover;border-radius:8px;border:1px solid var(--line);}
.cr-list-body{flex:1 1 auto;min-width:0;}
.cr-list-name{display:block;font-weight:900;font-size:18px;color:var(--ink);}
.cr-list-score{display:flex;align-items:center;gap:6px;margin:2px 0;}
.cr-list-score b{color:var(--red);font-weight:900;}
.cr-list-fee{display:block;font-size:13px;color:var(--sub);line-height:1.4;}
.cr-list-arrow{flex:0 0 auto;color:var(--red);font-size:18px;}
@media(max-width:600px){
  .cr-list-img{flex-basis:76px;}.cr-list-img img{width:76px;height:60px;}
  .cr-list-name{font-size:16px;}
  .cr-list-arrow{display:none;}
  .cr-list-score .star5_rating{font-size:16px;}
  .cr-list-card{padding:12px 14px;gap:12px;}
}

/* topTopic small area */
.topTopic{margin-top:18px;}

/* =====================================================================
   EXIT POPUP (pop) ブランド統一
   ===================================================================== */
.modal_content{background:var(--grad)!important;}
.modal_content h2{color:#fff!important;background:none!important;}
.modal_content h2 strong{color:#ffe14d!important;}
.popUp_btn{background:var(--grad-btn)!important;color:#fff!important;border-color:var(--red-d)!important;box-shadow:0 6px 16px rgba(204,0,0,.35)!important;}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footerMenu{background:#20242b;color:#cfd3da;margin-top:40px;padding:30px 16px 20px;}
#footer_logo{text-align:center;margin-bottom:18px;}
#footer_logo a{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:22px;color:#fff;}
#footer_logo .cr-flogo-txt b{color:#ff5a6a;}
.footer_container{max-width:1000px;margin:0 auto;display:flex;gap:30px;flex-wrap:wrap;}
.footer_container h2{font-size:15px;font-weight:800;margin:0 0 10px;}
.footer_container h2 a,.footerMenu a{color:#e7eaef;}
.footerMenu_list,.footer_box_menu ul{list-style:none;padding:0;margin:0;}
.footerMenu_list li,.footer_box_menu li{margin-bottom:7px;font-size:13.5px;}
.footerMenu a:hover{color:var(--red2);}
.footer_container_sp{max-width:520px;margin:0 auto;}
.footerSp_btn_list,.footerSp_menu{list-style:none;padding:0;margin:0;}
.footerSp_btn_list>li{border-bottom:1px solid #333842;}
.footerSp_btn_list h2{font-size:15px;margin:0;padding:12px 4px;}
.footerSp_list{list-style:none;padding:0 0 10px 14px;}
.footerSp_list li{padding:5px 0;font-size:14px;}
.footerSp_menu{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;}
.footerSp_menu li{font-size:12.5px;}
footer{background:#181b21;color:#8b909a;text-align:center;padding:14px;font-size:12px;}

/* =====================================================================
   detail / column / archive shared tweaks
   ===================================================================== */
.container article{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-s);padding:22px;margin-bottom:22px;}
.archive-entry-title{background:var(--grad)!important;border-radius:10px;}
.archive-entry-title a{color:#fff!important;}
h2.mainH2 + *{margin-top:0;}

/* =====================================================================
   編集部コメント（recommend_point 内）— 当サイト独自の考察ブロック
   ===================================================================== */
.recommend_point .cr-editor{
  background:linear-gradient(180deg,#fffdfa,#fff7f4);
  border:1px solid var(--line);border-left:5px solid var(--red);
  border-radius:0 12px 12px 0;padding:16px 18px 14px;margin:18px 0 0;
}
.recommend_point .cr-editor .lbl{
  display:inline-block;background:var(--grad);color:#fff;font-weight:900;font-size:12.5px;
  padding:4px 14px;border-radius:999px;margin-bottom:8px;
}
.recommend_point .cr-editor .lbl i{margin-right:6px;}
.recommend_point .cr-editor p{
  margin:0!important;font-size:14.5px;line-height:1.95;color:var(--ink);
  padding:0!important;border:none!important;
}
.recommend_point .cr-editor p::before{display:none!important;content:none!important;}
/* おすすめポイントの強調リード文 */
.reason_container li strong{color:var(--red-d);}
@media(max-width:600px){
  .recommend_point .cr-editor{padding:14px 15px 12px;}
  .recommend_point .cr-editor p{font-size:13.8px;line-height:1.9;}
}

/* =====================================================================
   コラム（サイドバー／アーカイブ／個別記事）
   ===================================================================== */
.cr-side-cols{list-style:none;margin:0;padding:10px 12px;}
.cr-side-cols li{border-bottom:1px dashed var(--line);}
.cr-side-cols li:last-child{border-bottom:none;}
.cr-side-cols a{display:flex;gap:9px;align-items:flex-start;padding:10px 2px;}
.cr-side-cols .no{
  flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--red-l);color:var(--red-d);
  font-weight:900;font-size:11.5px;display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.cr-side-cols .tt{font-size:13.2px;font-weight:700;color:var(--ink);line-height:1.6;}
.cr-side-cols a:hover .tt{color:var(--red-d);}
.cr-side-more{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 12px 12px;background:var(--red-l);color:var(--red-d)!important;font-weight:800;font-size:13.5px;padding:10px;border-radius:10px;}
.cr-side-more:hover{background:var(--red);color:#fff!important;}
.cr-sec-lbl{display:block;text-align:center;color:var(--red);font-weight:900;letter-spacing:.18em;font-size:12.5px;margin-bottom:2px;}
.cr-archive-h{text-align:center;}

/* アーカイブ一覧をカード型に */
body.archive .container article,
body.category .container article{
  background:#fff!important;border:2px solid var(--line)!important;border-radius:var(--radius)!important;
  box-shadow:var(--shadow-s)!important;padding:20px 22px!important;margin:0 0 16px!important;transition:.2s;
}
body.archive .container article:hover,
body.category .container article:hover{border-color:var(--red)!important;box-shadow:var(--shadow)!important;}
body.archive .container article .mainH2,
body.category .container article .mainH2{
  text-align:left!important;font-size:19px!important;margin:0 0 8px!important;line-height:1.55!important;
}
body.archive .container article .mainH2::after,
body.category .container article .mainH2::after{display:none!important;}
body.archive .container article .mainH2 a,
body.category .container article .mainH2 a{color:var(--ink)!important;font-weight:900;}
body.archive .container article .mainH2 a:hover,
body.category .container article .mainH2 a:hover{color:var(--red-d)!important;}
.archive-entry-title{background:none!important;padding:0!important;}
.archive-entry-title a{color:var(--ink)!important;}
.archive-entry-content{padding:0!important;font-size:13.8px;color:var(--sub);line-height:1.85;}
.archive-entry-content a{color:var(--red-d)!important;font-weight:700;}

/* コラム個別ページ */
body.single-post .container article{
  background:#fff!important;border:2px solid var(--line)!important;border-radius:var(--radius)!important;
  box-shadow:var(--shadow-s)!important;padding:26px 24px!important;
}
.cr-post-title{
  font-size:clamp(21px,4.4vw,28px);font-weight:900;color:var(--ink);line-height:1.5;margin:4px 0 10px;
  padding-bottom:14px;border-bottom:3px solid var(--red-l);
}
.cr-post-meta{font-size:12.5px;color:var(--sub);font-weight:700;margin:0 0 20px;}
.cr-post-meta i{margin-right:6px;color:var(--red);}
body.single-post .container article h3{
  font-size:19px;font-weight:900;color:var(--ink);margin:26px 0 12px;padding-left:13px;position:relative;line-height:1.5;
}
body.single-post .container article h3::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:3px;background:var(--grad);}
body.single-post .container article p{margin:0 0 14px;font-size:15.2px;line-height:1.95;}
body.single-post .container article ul{list-style:none;padding:0;margin:0 0 16px;}
body.single-post .container article ul li{position:relative;padding:8px 4px 8px 30px;border-bottom:1px dashed var(--line);font-size:14.8px;line-height:1.75;}
body.single-post .container article ul li::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;color:#fff;position:absolute;left:2px;top:11px;font-size:9px;background:var(--red);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
body.single-post .container article strong{color:var(--red-d);text-decoration:none!important;}

/* フッター4カラム化（コラム追加に対応）。旧CSSの幅指定を解除して等幅グリッドに */
@media(min-width:901px){
  .footer_container.pc{display:grid!important;grid-template-columns:0.75fr 1fr 1.5fr 1fr;gap:26px;align-items:start;}
  .footer_container.pc>div{width:auto!important;max-width:none!important;min-width:0;float:none!important;margin:0!important;}
  .footer_container.pc ul,
  .footer_container.pc li,
  .footer_container.pc li a,
  .footer_container.pc h2{width:auto!important;max-width:none!important;float:none!important;}
  .footer_box_column .footerMenu_list li{line-height:1.6;margin-bottom:9px;}
}
.footer_box_column h2 a{color:#fff;}

span.reference {
    font-size: 0.6em;
    color: #aaa;
    margin-top: 0.5em;
}