/* =========================================================
   KEIBA ARENA - article-detail.css
   記事本文ページ専用CSS
   Magazine Renewal / 競馬カフェ × 上質なWebマガジン
   ※ common.css の後に読み込む
========================================================= */

:root{
  --detail-max:900px;
  --detail-wide:1120px;
  --detail-cream:#f7f0e5;
  --detail-cream-2:#fffaf2;
  --detail-paper:#fffdf8;
  --detail-ink:#243028;
  --detail-muted:#766b5f;
  --detail-line:#e3d4bd;
  --detail-green:#0f3d2e;
  --detail-green-2:#174f3b;
  --detail-gold:#c49a54;
  --detail-brown:#7b5733;
  --detail-shadow:0 22px 60px rgba(56,38,18,.12);
  --detail-soft-shadow:0 10px 30px rgba(56,38,18,.09);
}

html{scroll-behavior:smooth;}

body{
  background:var(--cream,var(--detail-cream));
  color:var(--ink,var(--detail-ink));
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

/* ===== Article Hero ===== */
.article-detail-hero{
  max-width:var(--detail-wide);
  margin:0 auto;
  padding:48px clamp(18px,4vw,38px) 28px;
}

.article-detail-hero-inner{
  background:var(--detail-paper);
  border:1px solid var(--detail-line);
  box-shadow:var(--detail-shadow);
  padding:46px clamp(24px,5vw,58px);
}

.article-label{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 12px;
  margin-bottom:20px;
  border:1px solid #d8c6aa;
  border-radius:999px;
  background:rgba(241,225,198,.62);
  color:#7b5733;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}

.article-detail-hero h1{
  max-width:860px;
  margin:0 0 22px;
  color:#3e2a1d;
  font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,"Times New Roman",serif;
  font-size:clamp(30px,4vw,46px);
  font-weight:500;
  line-height:1.45;
  letter-spacing:.06em;
}

.article-lead{
  max-width:760px;
  margin:0;
  color:#554b42;
  font-size:16px;
  line-height:2.05;
  letter-spacing:.04em;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:26px;
  color:#8d7b68;
  font-size:13px;
}

.article-meta span{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* ===== Article Layout ===== */
.article-detail-wrap{
  max-width:var(--detail-wide);
  margin:0 auto;
  padding:0 clamp(18px,4vw,38px) 64px;
  display:block;
}

.article-main{
  max-width:var(--detail-max);
  margin:0 auto;
}

.article-body{
  max-width:var(--detail-max);
}

.article-body p{
  margin:0 0 1.7em;
  color:#3f3831;
  font-size:16px;
  line-height:2.05;
  letter-spacing:.04em;
}

.article-body h2{
  margin:2.7em 0 1em;
  padding-bottom:12px;
  border-bottom:1px solid var(--detail-line);
  color:#3e2a1d;
  font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  font-size:28px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.06em;
}

.article-body h2:first-child{
  margin-top:0;
}

.article-body h3{
  margin:2.2em 0 .9em;
  padding-left:14px;
  border-left:4px solid var(--detail-green);
  color:#2f2923;
  font-size:21px;
  line-height:1.55;
  font-weight:600;
  letter-spacing:.04em;
}

.article-body ul,
.article-body ol{
  margin:0 0 1.8em;
  padding-left:1.4em;
  color:#3f3831;
  font-size:16px;
  line-height:2;
}

.article-body li+li{
  margin-top:.45em;
}

.article-body strong{
  color:#2d332c;
  font-weight:700;
}

.article-body a{
  color:var(--detail-green);
  border-bottom:1px solid rgba(15,61,46,.28);
}

.article-body a:hover{
  border-bottom-color:var(--detail-green);
}

.article-body blockquote{
  margin:2em 0;
  padding:22px 24px;
  background:#fffaf2;
  border-left:4px solid var(--detail-gold);
  color:#5c5147;
  line-height:2;
}

/* ===== Table of Contents ===== */
.toc-box{
  margin:0 0 34px;
  padding:24px;
  background:#fffaf2;
  border:1px solid var(--detail-line);
}

.toc-box h2{
  margin:0 0 16px;
  padding:0;
  border:0;
  color:#3e2a1d;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  letter-spacing:.08em;
}

.toc-box ol{
  margin:0;
  padding-left:1.25em;
}

.toc-box li{
  color:#5d5248;
  font-size:14px;
  line-height:1.8;
}

.toc-box li+li{
  margin-top:6px;
}

.toc-box a{
  color:#4a3928;
  border-bottom:0;
}

.toc-box a:hover{
  color:var(--detail-green);
}

/* ===== Info / Note Boxes ===== */
.info-box,
.note-box,
.disclaimer-box{
  margin:2em 0;
  padding:22px 24px;
  border:1px solid var(--detail-line);
  background:#fffaf2;
}

.info-box h3,
.note-box h3,
.disclaimer-box h3{
  margin:0 0 10px;
  padding:0;
  border:0;
  color:#3e2a1d;
  font-size:18px;
}

.info-box p,
.note-box p,
.disclaimer-box p{
  margin:0;
  color:#5c5147;
  font-size:14px;
  line-height:1.9;
}

.disclaimer-box{
  background:rgba(255,253,248,.72);
}



/* ===== Related Articles ===== */
.related-section{
  max-width:var(--detail-wide);
  margin:0 auto;
  padding:0 clamp(18px,4vw,38px) 70px;
}

.related-heading{
  margin-bottom:22px;
}

.related-heading .section-en{
  margin:0 0 7px;
  color:#3e2a1d;
  font-family:Georgia,"Times New Roman",serif;
  font-size:24px;
  letter-spacing:.08em;
  line-height:1;
}

.related-heading h2{
  margin:0;
  color:var(--detail-muted);
  font-size:13px;
  font-weight:600;
  letter-spacing:.13em;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.related-card{
  position:relative;
  display:block;
  min-height:150px;
  padding:22px;
  background:rgba(255,253,248,.76);
  border:1px solid var(--detail-line);
  box-shadow:0 10px 28px rgba(56,38,18,.07);
  transition:.28s ease;
}

.related-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,var(--detail-green),var(--detail-gold));
  opacity:.82;
}

.related-card:hover{
  transform:translateY(-4px);
  background:#fffdf8;
  box-shadow:var(--detail-soft-shadow);
}

.related-card span{
  display:inline-block;
  margin-bottom:12px;
  color:#7b5733;
  font-size:12px;
  font-weight:700;
}

.related-card h3{
  margin:0;
  color:#2f2923;
  font-size:16px;
  line-height:1.65;
  font-weight:500;
}

/* ===== Bottom Navigation ===== */
.article-bottom-nav{
  max-width:var(--detail-wide);
  margin:0 auto;
  padding:0 clamp(18px,4vw,38px) 70px;
  display:flex;
  justify-content:space-between;
  gap:16px;
}

.article-bottom-nav a{
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  border:1px solid rgba(89,65,39,.42);
  background:rgba(255,253,248,.48);
  color:#4a3928;
  font-size:13px;
  letter-spacing:.08em;
  transition:.25s ease;
}

.article-bottom-nav a:hover{
  transform:translateY(-2px);
  background:#fffdf8;
  box-shadow:var(--detail-soft-shadow);
}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .article-detail-wrap{
    grid-template-columns:1fr;
  }

  .article-sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  .sidebar-box{
    margin-bottom:0;
  }
}

@media (max-width:880px){
  .article-detail-hero{
    padding-top:28px;
  }

  .article-detail-hero-inner{
    padding:36px 24px;
  }

  .article-detail-hero h1{
    font-size:32px;
  }


  .related-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:880px){

    .article-body{
        padding:0 6px;
    }

}

@media (max-width:620px){
  .article-detail-hero,
  .article-detail-wrap,
  .related-section,
  .article-bottom-nav{
    padding-left:18px;
    padding-right:18px;
  }

  .article-detail-hero h1{
    font-size:28px;
  }

  .article-lead,
  .article-body p,
  .article-body ul,
  .article-body ol{
    font-size:15px;
  }

  .article-body h2{
    font-size:24px;
  }

  .article-body h3{
    font-size:19px;
  }

  .article-sidebar{
    grid-template-columns:1fr;
  }

  .article-bottom-nav{
    flex-direction:column;
  }

  .article-bottom-nav a{
    width:100%;
  }
}

/* =========================================================
   KEIBA ARENA - article-detail.css 強化パーツ
   既存CSSは削除せず、この記事用コンポーネントを追加
========================================================= */

/* ===== Article Section Utility ===== */
.article-section{
  margin:0 0 2.8em;
}

/* ===== Small Links ===== */
.small-link{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:0 16px;
  border:1px solid rgba(89,65,39,.42);
  background:rgba(255,253,248,.72);
  color:var(--detail-green);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  transition:.25s ease;
}

.small-link:hover{
  transform:translateY(-2px);
  background:#fffdf8;
  box-shadow:var(--detail-soft-shadow);
}

/* ===== Checklist ===== */
.checklist{
  list-style:none;
  padding-left:0 !important;
}

.checklist li{
  position:relative;
  padding-left:1.6em;
}

.checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--detail-green);
  font-weight:700;
}

/* ===== Point Cards ===== */
.point-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:2em 0;
}

.point-card{
  padding:22px 24px;
  background:#fffaf2;
  border:1px solid var(--detail-line);
  box-shadow:0 8px 24px rgba(56,38,18,.06);
}

.point-card h3{
  margin:0 0 10px;
  padding:0;
  border:0;
  color:#3e2a1d;
  font-size:18px;
}

.point-card p{
  margin:0;
  color:#5c5147;
  font-size:14px;
  line-height:1.9;
}

.point-card ul{
  margin:0;
  padding-left:1.2em;
  font-size:14px;
  line-height:1.9;
}

/* ===== Comparison Table ===== */
.comparison-table-wrap{
  width:100%;
  overflow-x:auto;
  margin:2em 0;
}

.comparison-table,
.article-body table{
  width:100%;
  border-collapse:collapse;
  background:#fffdf8;
  border:1px solid var(--detail-line);
  font-size:14px;
  line-height:1.7;
}

.comparison-table th,
.comparison-table td,
.article-body table th,
.article-body table td{
  padding:14px 16px;
  border:1px solid var(--detail-line);
  vertical-align:top;
}

.comparison-table th,
.article-body table th{
  background:#f4eadb;
  color:#3e2a1d;
  font-weight:700;
  white-space:nowrap;
}

.comparison-table td,
.article-body table td{
  color:#4b4037;
}

/* ===== Hotel Detail Cards ===== */
.hotel-detail-list{
  display:grid;
  gap:18px;
  margin:2em 0;
}

.hotel-detail-card{
  padding:26px;
  background:#fffaf2;
  border:1px solid var(--detail-line);
  box-shadow:0 10px 28px rgba(56,38,18,.07);
}

.hotel-detail-card h3{
  margin:0 0 12px;
  padding-left:14px;
  border-left:4px solid var(--detail-green);
  color:#2f2923;
  font-size:20px;
}

.hotel-detail-card p{
  margin:0 0 1.2em;
  color:#5c5147;
  font-size:15px;
  line-height:1.95;
}

.hotel-detail-card ul{
  margin:0 0 1.4em;
  padding-left:1.2em;
  font-size:14px;
  line-height:1.9;
}

.official-link{
  margin-bottom:0 !important;
}

/* ===== Area Blocks / Hotel Candidates ===== */
.area-block{
  margin:2.2em 0;
}

.hotel-candidates{
  margin:1.5em 0 0;
  padding:20px 22px;
  background:#fffaf2;
  border:1px solid var(--detail-line);
}

.hotel-candidates h4{
  margin:0 0 10px;
  color:#3e2a1d;
  font-size:16px;
}

.hotel-candidates ul{
  margin:0;
}

/* ===== FAQ ===== */
.faq-list{
  display:grid;
  gap:16px;
  margin:2em 0;
}

.faq-item{
  padding:22px 24px;
  background:#fffaf2;
  border:1px solid var(--detail-line);
}

.faq-item h3{
  margin:0 0 10px;
  padding-left:14px;
  border-left:4px solid var(--detail-green);
  font-size:18px;
}

.faq-item p{
  margin:0;
  color:#5c5147;
  font-size:15px;
  line-height:1.95;
}

.article-sidebar{
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.sidebar-box{
  padding: 20px;
}

.sidebar-box ul{
  margin: 0;
  padding-left: 18px;
}

.sidebar-box li{
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ===== Related Card Description ===== */
.related-card p{
  margin:10px 0 0;
  color:#5c5147;
  font-size:13px;
  line-height:1.75;
  letter-spacing:.03em;
}

/* ===== Article Footer ===== */
.article-footer{
  max-width:var(--detail-wide);
  margin:0 auto;
  padding:0 clamp(18px,4vw,38px) 70px;
}

.article-footer > div{
  padding:22px 24px;
  background:rgba(255,253,248,.72);
  border:1px solid var(--detail-line);
}

.article-footer p{
  margin:0;
  color:#6f6257;
  font-size:13px;
  line-height:1.9;
}

/* ===== Strengthened Responsive ===== */
@media (max-width:880px){
  .point-grid{
    grid-template-columns:1fr;
  }

  .hotel-detail-card{
    padding:22px;
  }
}

@media (max-width:620px){
  .comparison-table,
  .article-body table{
    min-width:720px;
  }

  .point-card,
  .hotel-detail-card,
  .faq-item,
  .hotel-candidates{
    padding:20px;
  }
}
body.menu-open{
  overflow:hidden;
}

/* パンくずリスト */
.breadcrumb {
  max-width: 1120px;
  margin: 18px auto 0;
  padding: 0 24px;
  font-size: 13px;
  color: #766b5f;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li {
  display: flex;
  align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin-left: 8px;
  color: #b7a58f;
}

.breadcrumb a {
  color: #766b5f;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: #243028;
  font-weight: 600;
}

.page-simple{
    max-width:900px;
    margin:0 auto;
}

.article-table{
    width:100%;
    border-collapse:collapse;
    margin:24px 0;
}

.article-table th,
.article-table td{
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    text-align:left;
}

.article-table th{
    width:28%;
    background:var(--cream-2);
    font-weight:700;
}

.back-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:24px;
    color:var(--green);
    font-weight:600;
    text-decoration:none;
}

.back-link:hover{
    text-decoration:underline;
}