:root {
  --tf:      #0ABCBC;
  --tf-d:    #089898;
  --tf-dd:   #066E6E;
  --tf-l:    #C8F2F2;
  --tf-ll:   #E8FAFA;
  --gold:    #F4C542;
  --gold-d:  #D4A500;
  --navy:    #0A2540;
  --white:   #FFFFFF;
  --g50:     #F5FDFD;
  --g100:    #EAFAFB;
  --g200:    #CCE9EA;
  --g400:    #7BBCBC;
  --g600:    #3D7A7A;
  --g800:    #1A4040;
  --text:    #0A2540;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Noto Sans JP',sans-serif;color:var(--text);background:var(--white);}
a{text-decoration:none;color:inherit;}

/* HEADER */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:white;height:60px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 36px;
  box-shadow:0 1px 0 rgba(10,188,188,.15),0 2px 12px rgba(10,188,188,.07);
}
.logo{display:flex;align-items:center;gap:9px;}
.logo-mark{
  width:32px;height:32px;background:var(--tf);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
}
.logo-mark svg{width:20px;height:20px;fill:white;}
.logo-name{font-size:13px;font-weight:800;color:var(--navy);letter-spacing:-.2px;line-height:1.2;}
.logo-name span{color:var(--tf);display:block;font-size:10px;font-weight:600;letter-spacing:.5px;}
nav{display:flex;gap:22px;}
nav a{font-size:13px;font-weight:600;color:var(--g600);transition:color .2s;}
nav a:hover{color:var(--tf);}
.h-btn{
  background:var(--tf);color:white;font-size:13px;font-weight:700;
  padding:8px 18px;border-radius:6px;transition:background .2s;
}
.h-btn:hover{background:var(--tf-d);}

/* HERO */
.hero{
  min-height:100vh;padding-top:60px;
  background:linear-gradient(150deg,var(--tf) 0%,#09AAAA 50%,#078888 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;text-align:center;
}
.hero-circles{position:absolute;inset:0;pointer-events:none;}
.hero-circles::before{
  content:'';position:absolute;top:-180px;right:-180px;
  width:520px;height:520px;border-radius:50%;
  border:100px solid rgba(255,255,255,.07);
}
.hero-circles::after{
  content:'';position:absolute;bottom:-80px;left:-80px;
  width:360px;height:360px;border-radius:50%;
  border:70px solid rgba(255,255,255,.06);
}
.hero-inner{
  position:relative;z-index:2;
  padding:60px 40px 140px;max-width:860px;
}
.hero-year-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  color:white;font-size:11.5px;font-weight:700;letter-spacing:1.5px;
  padding:5px 16px;border-radius:100px;margin-bottom:24px;
}
.hero-year-badge::before{
  content:'';width:6px;height:6px;background:var(--gold);border-radius:50%;
  animation:blink 2s infinite;
}
.hero-h1{
  font-size:54px;font-weight:900;color:white;line-height:1.2;
  letter-spacing:-1.5px;margin-bottom:18px;
  text-shadow:0 2px 20px rgba(0,0,0,.1);
}
.hero-h1 .hl{
  color:var(--gold);
  border-bottom:3px solid var(--gold);padding-bottom:2px;
}
.hero-sub{
  font-size:16px;color:rgba(255,255,255,.88);line-height:1.85;
  max-width:580px;margin:0 auto 36px;
}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-gold{
  background:var(--gold);color:var(--navy);font-size:15px;font-weight:800;
  padding:14px 32px;border-radius:9px;
  display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 4px 22px rgba(244,197,66,.45);transition:all .2s;
}
.btn-gold:hover{background:var(--gold-d);transform:translateY(-2px);}
.btn-wh{
  background:rgba(255,255,255,.14);color:white;font-size:15px;font-weight:700;
  padding:14px 32px;border-radius:9px;border:1.5px solid rgba(255,255,255,.4);
  display:inline-flex;align-items:center;gap:7px;transition:all .2s;
}
.btn-wh:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.7);}

/* HERO WAVE */
.hero-wave{position:absolute;bottom:-2px;left:0;right:0;}
.hero-wave svg{width:100%;display:block;}

/* TRUST BAR */
.trust{
  background:var(--navy);height:56px;
  display:flex;align-items:center;justify-content:center;gap:48px;
}
.trust-item{display:flex;align-items:center;gap:7px;color:rgba(255,255,255,.8);font-size:13px;font-weight:600;}
.trust-item .ck{color:var(--tf);font-weight:900;font-size:15px;}
.trust-sep{width:1px;height:22px;background:rgba(255,255,255,.15);}

/* SECTION COMMONS */
section{padding:80px 36px;}
.wrap{max-width:1060px;margin:0 auto;}
.sec-label{font-size:11px;font-weight:800;letter-spacing:2.5px;color:var(--tf);text-transform:uppercase;margin-bottom:9px;}
.sec-title{font-size:34px;font-weight:900;color:var(--navy);line-height:1.25;letter-spacing:-.5px;margin-bottom:12px;}
.sec-desc{font-size:15px;color:var(--g600);line-height:1.85;max-width:500px;}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;}

/* RANKING */
.rank-section{background:var(--g50);}
.rank-list{display:flex;flex-direction:column;gap:16px;}
.rank-card{
  background:white;border-radius:16px;padding:24px 28px;
  border:1.5px solid var(--g100);display:flex;align-items:center;gap:24px;
  transition:border-color .2s,box-shadow .2s;
}
.rank-card:hover{border-color:var(--tf-l);box-shadow:0 8px 32px rgba(10,188,188,.1);}
.rank-card.top{border-color:var(--gold);border-width:2px;}
.rank-num{
  font-family:'Bebas Neue',sans-serif;font-size:44px;color:var(--g200);
  line-height:1;min-width:40px;text-align:center;
}
.rank-card.top .rank-num{color:var(--gold);}
.rank-logo{
  width:60px;height:60px;border-radius:12px;background:var(--tf-ll);
  display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;
}
.rank-info{flex:1;}
.rank-badge{
  display:inline-block;background:var(--tf-ll);color:var(--tf-dd);
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;margin-bottom:7px;
}
.rank-card.top .rank-badge{background:rgba(244,197,66,.15);color:var(--gold-d);}
.rank-name{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:6px;}
.rank-tags{display:flex;flex-wrap:wrap;gap:6px;}
.rank-tag{
  font-size:12px;font-weight:500;color:var(--g600);
  background:var(--g100);padding:3px 10px;border-radius:100px;
}
.rank-right{text-align:right;flex-shrink:0;}
.rank-stars{color:var(--gold);font-size:15px;letter-spacing:1px;}
.rank-review{font-size:12px;color:var(--g400);margin-top:3px;}
.rank-price{font-size:20px;font-weight:900;color:var(--tf-dd);margin-top:8px;}
.rank-price small{font-size:12px;font-weight:400;color:var(--g600);}
.rank-btn{
  display:inline-block;background:var(--tf);color:white;
  font-size:13px;font-weight:700;padding:8px 20px;border-radius:7px;
  margin-top:10px;transition:background .2s;
}
.rank-btn:hover{background:var(--tf-d);}
.rank-card.top .rank-btn{background:var(--gold);color:var(--navy);}
.rank-card.top .rank-btn:hover{background:var(--gold-d);}

/* PRICE TABLE */
.price-section{background:white;}
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px;}
.price-card{border-radius:16px;border:1.5px solid var(--g100);overflow:hidden;}
.price-head{padding:20px 24px;background:linear-gradient(135deg,var(--tf),var(--tf-d));}
.price-head.dark{background:linear-gradient(135deg,var(--navy),#0E3460);}
.price-type{font-size:14px;font-weight:700;color:rgba(255,255,255,.8);margin-bottom:6px;}
.price-name{font-size:22px;font-weight:900;color:white;}
.price-body{padding:20px 24px;background:white;}
.price-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--g100);font-size:14px;
}
.price-row:last-child{border-bottom:none;}
.price-row-label{color:var(--g600);}
.price-row-val{font-weight:700;color:var(--navy);}
.price-row-val.accent{color:var(--tf-dd);}

/* AI SECTION */
.ai-section{background:linear-gradient(135deg,var(--navy),#0E3460);padding:80px 36px;}
.ai-inner{
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
.ai-section .sec-label{color:#5FE0E0;}
.ai-section .sec-title{color:white;}
.ai-section .sec-desc{color:rgba(255,255,255,.6);max-width:420px;}
.ai-features{display:flex;flex-direction:column;gap:16px;margin-top:28px;}
.ai-feat{
  display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(10,188,188,.2);
  border-radius:12px;padding:16px 20px;transition:border-color .2s;
}
.ai-feat:hover{border-color:rgba(10,188,188,.5);}
.ai-feat-icon{font-size:22px;flex-shrink:0;}
.ai-feat-text{font-size:14px;font-weight:600;color:rgba(255,255,255,.85);line-height:1.6;}
.ai-visual{
  background:rgba(255,255,255,.06);border:1px solid rgba(10,188,188,.2);
  border-radius:20px;padding:28px;
}
.ai-vis-title{font-size:14px;font-weight:700;color:rgba(255,255,255,.6);margin-bottom:20px;letter-spacing:1px;}
.ai-bar-row{margin-bottom:16px;}
.ai-bar-label{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.75);margin-bottom:7px;}
.ai-bar-track{height:8px;background:rgba(255,255,255,.1);border-radius:100px;overflow:hidden;}
.ai-bar-fill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--tf),var(--tf-l));}

/* ARTICLES */
.article-section{background:var(--g50);}
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;}
.art-card{
  background:white;border-radius:16px;overflow:hidden;
  border:1.5px solid var(--g100);transition:transform .25s,box-shadow .25s;
}
.art-card:hover{transform:translateY(-4px);box-shadow:0 12px 36px rgba(10,188,188,.12);}
.art-thumb{
  height:140px;background:linear-gradient(135deg,var(--tf),var(--tf-d));
  display:flex;align-items:center;justify-content:center;font-size:48px;
}
.art-body{padding:20px;}
.art-tag{
  display:inline-block;background:var(--tf-ll);color:var(--tf-dd);
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:4px;margin-bottom:10px;
}
.art-title{font-size:15px;font-weight:700;color:var(--navy);line-height:1.5;margin-bottom:10px;}
.art-date{font-size:12px;color:var(--g400);}

/* CTA */
.cta-section{
  background:linear-gradient(135deg,var(--tf),var(--tf-d));
  padding:80px 36px;text-align:center;position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;top:-120px;right:-120px;
  width:360px;height:360px;border-radius:50%;
  border:70px solid rgba(255,255,255,.08);
}
.cta-section h2{font-size:38px;font-weight:900;color:white;margin-bottom:12px;letter-spacing:-.5px;}
.cta-section p{font-size:15px;color:rgba(255,255,255,.85);margin-bottom:32px;line-height:1.8;}
.cta-btns{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}
.btn-cta-g{
  background:var(--gold);color:var(--navy);font-size:15px;font-weight:800;
  padding:14px 34px;border-radius:9px;display:inline-flex;align-items:center;gap:7px;
  box-shadow:0 4px 22px rgba(244,197,66,.4);transition:all .2s;
}
.btn-cta-g:hover{background:var(--gold-d);transform:translateY(-2px);}
.btn-cta-o{
  background:rgba(255,255,255,.12);color:white;font-size:15px;font-weight:700;
  padding:14px 34px;border-radius:9px;border:1.5px solid rgba(255,255,255,.4);
  display:inline-flex;align-items:center;gap:7px;transition:all .2s;
}
.btn-cta-o:hover{border-color:white;background:rgba(255,255,255,.2);}

/* FOOTER */
footer{background:#050F1C;padding:52px 36px 28px;}
.footer-grid{
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;
}
.foot-desc{font-size:13px;color:rgba(255,255,255,.38);line-height:1.85;margin-top:12px;}
.foot-col-title{font-size:10.5px;font-weight:700;letter-spacing:1.5px;color:rgba(255,255,255,.32);text-transform:uppercase;margin-bottom:14px;}
.foot-links{display:flex;flex-direction:column;gap:9px;}
.foot-links a{font-size:13.5px;color:rgba(255,255,255,.52);transition:color .2s;}
.foot-links a:hover{color:var(--tf);}
.footer-bottom{
  max-width:1060px;margin:36px auto 0;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.07);
  display:flex;justify-content:space-between;align-items:center;
}
.foot-copy{font-size:12px;color:rgba(255,255,255,.22);}

/* LINE FLOAT */
.line-float{
  position:fixed;bottom:22px;right:22px;z-index:200;
  background:#06C755;color:white;font-size:13px;font-weight:700;
  padding:11px 20px;border-radius:50px;
  display:flex;align-items:center;gap:7px;
  box-shadow:0 4px 18px rgba(6,199,85,.4);transition:transform .2s;
}
.line-float:hover{transform:scale(1.05);}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.fade{animation:fadeUp .7s ease both;}
.fade2{animation:fadeUp .7s ease .15s both;}

/* 2社セクション リンク */
.twosha-section a { color: #0000EE; text-decoration: underline; }
.twosha-section a:visited { color: #551A8B; }
.twosha-section a:hover { color: #0000CC; }

/* ===== スマホ対応 ===== */
@media (max-width: 768px) {

  /* ヘッダー */
  header { padding: 0 12px; height: 52px; }
  .logo-name { display: none; }
  .logo-mark { width: 26px; height: 26px; }
  nav { display: none; }
  .h-btn { font-size: 11px; padding: 6px 10px; white-space: nowrap; }
  header > div { gap: 6px; }
  header > div > span { font-size: 9px; }

  /* ヒーロー */
  .hero-inner { padding: 32px 16px 90px; }
  .hero-h1 { font-size: 22px; letter-spacing: -.3px; line-height: 1.3; word-break: keep-all; }
  .hero-h1 .hl { border-bottom: 2px solid var(--gold); }
  .hero-sub { font-size: 13px; line-height: 1.7; word-break: keep-all; }
  .hero-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-gold, .btn-wh { width: 100%; justify-content: center; font-size: 14px; padding: 12px 20px; }

  /* トラストバー */
  .trust { flex-direction: column; height: auto; padding: 20px 16px; gap: 10px; text-align: center; align-items: center; }
  .trust-sep { display: none; }
  .trust-item { font-size: 13px; justify-content: center; width: 100%; max-width: 240px; }

  /* セクション共通 */
  section { padding: 40px 16px; }
  .sec-title { font-size: 22px; letter-spacing: -.3px; }
  .sec-desc { font-size: 13px; }
  .sec-row { flex-direction: column; gap: 12px; align-items: flex-start; }

  /* ランキング */
  .rank-card { flex-wrap: wrap; gap: 12px; padding: 14px; }
  .rank-num { font-size: 28px; min-width: 24px; }
  .rank-logo { width: 48px; height: 48px; font-size: 22px; }
  .rank-name { font-size: 15px; }
  .rank-right { width: 100%; text-align: left; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .rank-price { font-size: 16px; margin-top: 0; }
  .rank-btn { margin-top: 0; }

  /* 料金グリッド */
  .price-grid { grid-template-columns: 1fr; gap: 14px; }

  /* AIセクション */
  .ai-section { padding: 40px 16px; }
  .ai-inner { grid-template-columns: 1fr; gap: 28px; }
  .ai-section .sec-title { font-size: 22px; }

  /* 記事グリッド */
  .article-grid { grid-template-columns: 1fr; gap: 14px; }

  /* CTAセクション */
  .cta-section { padding: 48px 16px; }
  .cta-section h2 { font-size: 22px; }
  .cta-section p { font-size: 13px; }
  .cta-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .btn-cta-g, .btn-cta-o { width: 100%; justify-content: center; font-size: 14px; }

  /* フッター */
  footer { padding: 36px 16px 20px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* LINEボタン */
  .line-float { bottom: 14px; right: 14px; font-size: 12px; padding: 9px 14px; }

  /* 2社セクション */
  .twosha-section { padding: 40px 16px !important; }
}