:root{
    --bg:#f4f5f7;
    --ink:#222;
    --muted:#667085;
    --brand:#5b7cff; /* 見出し帯・ボタン */
    --card:#ffffff;
    --line:#e5e7eb;
    --accent:#c68a55; /* クラフト色のアクセント */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);background:var(--bg);font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP","Yu Gothic UI","YuGothic","Meiryo", sans-serif;}
a{color:inherit}
.container{max-width:1100px;margin:auto;padding:32px 20px}
.hero{
    position:relative;
    padding:28px 24px;
    /*background:*/
    /*  linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.0)),*/
    /*  repeating-linear-gradient(0deg, #e8e9ee 0 3px, #f4f5f7 3px 8px);*/
    border-radius:14px;
    overflow:hidden;
    background-image: url('../img/kuredan/TANAX_kuredan_background-1.png');
}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.lineup{
    background-image: url("../img/kuredan/TANAX_kuredan_background-2.png");
    padding: 1px 20px 20px 20px;
    margin-top: 20px;
}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero h1{margin:0 0 10px;font-size:clamp(30px,2.2vw,40px)}
.lead{line-height:2; font-size: large; font-weight: bold}
/*.lead-head{margin-top: 30px}*/
.badge-row{margin:16px 0 0}
.badge{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;background:var(--brand);color:#fff;border-radius:999px;font-weight:600;text-decoration:none}
.hero-img{
    display:grid;place-items:center;color:#fff;font-weight:700;
    letter-spacing:.08em;
}
.hero-img img {
    width: 100%;
    height: auto;
}
/* セクション */
section{margin-top:38px}
h2{font-size:clamp(18px,2vw,30px);margin:0 0 12px}
.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:1fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid.cols-2,.grid.cols-3{grid-template-columns:1fr}}
.card-head{background-image: url("../img/kuredan/TANAX_kuredan_background-2.png");}
.card{padding: 0 20px 15px 20px; font-size: large;}
/* 円グラフ（conic-gradient）*/
.pies{display:grid;grid-template-columns:4.5fr 5.5fr;gap:18px;padding:20px;}
@media (max-width:600px){.pies{grid-template-columns:1fr}}
.pie{
    display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;
    padding:12px 14px;
}
/*.pie-figure{*/
/*  width:160px;height:160px;border-radius:50%;*/
/*  display:grid;place-items:center;color:#111;font-weight:700;*/
/*  box-shadow:inset 0 0 0 8px #fff, 0 0 0 1px var(--line);*/
/*}*/
/* 70/30 */
.p70{background:
        conic-gradient(#8ecae6 70%, #e4e7ec 0);}
/* 86/14 */
.p86{background:
        conic-gradient(#94d2bd 86%, #e4e7ec 0);}
.pie legend{font-weight:600;margin-bottom:2px}
/* シリーズカード */
.series{display:grid;grid-template-columns:repeat(3,1fr);gap:18px; text-align: center}
@media (max-width:1000px){.series{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.series{grid-template-columns:1fr}}
.series .thumb{
    width:100%;aspect-ratio:4/3;border-radius:10px;
    background:linear-gradient(180deg,#e7dac7,#cfb590);
    outline:1px solid #e8e2d9;
}
.thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.series h3{font-size:16px;margin:10px 0 6px}
.series p{margin:0;color:var(--ink);font-size:14px;line-height:1.6}
/* ダウンロードボタン */
.dl{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--brand);color:#fff;border:none;border-radius:12px;
    padding:12px 16px;font-weight:700;text-decoration:none;
}
/* 表 */
.table-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;overflow:auto}
table{border-collapse:collapse;min-width:900px;width:100%}
th,td{border:1px solid var(--line);padding:10px 12px;vertical-align:top}
th{background:#f8fafc;text-align:left}
.muted{color:var(--muted)}
/* フッター注記 */
.marks{font-size:13px;color:var(--muted);line-height:1.7}
.brandchip{display:inline-block;background:#ffe8d5;color:#6f4e2f;padding:2px 8px;border-radius:999px;border:1px solid #f6d0ac;font-weight:700}
/* 円のサイズを変えても調整しやすいように基準変数を定義 */
.pie-figure{
    --size: 180px;                /* 既存と同じ直径 */
    --label-shift: 10px;         /* ラベルを外へ出す距離（調整用） */
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color:#111;
    font-weight:700;
    font-size: large;
    box-shadow: inset 0 0 0 8px #fff, 0 0 0 1px var(--line);
}

/* 左上 = 残り（minor）、右下 = 本体（major） */
.pie-figure::before,
.pie-figure::after{
    position: absolute;
    font-weight: 600;
    font-size: 26px;
    line-height: 1;
    color: var(--ink);
    /* スクリーンリーダーでの重複読み上げ回避（視覚的ラベル） */
    aria-hidden: true; /* ← CSSには効かないため視覚目的の注記 */
    pointer-events: none;
}

.pie-figure::before{
    content: attr(data-minor);
    top: calc(-1 * var(--label-shift));
    left: calc(-1 * var(--label-shift));
}

.pie-figure::after{
    content: attr(data-major);
    right: calc(-1 * var(--label-shift));
    bottom: calc(-1 * var(--label-shift));
}

/* 画面が狭いときは少し内側へ寄せる */
@media (max-width: 480px){
    .pie-figure{ --label-shift: 20px; }
}
.image-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: center;
}
.image-row-4 img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.image-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: center;
    padding-left: 80px;
    padding-right: 40px;
    margin-top:20px;
    text-align: center;
    justify-content: center;
}
.image-row-3 img {
    width: 75%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}
table tr:nth-child(1) th,
table tr:nth-child(2) th,
table tr:nth-child(5) th,
table tr:nth-child(1) td,
table tr:nth-child(2) td,
table tr:nth-child(5) td {
    text-align: center;
    vertical-align: middle;
}
/* 背景つき問い合わせセクション */
.contact-section {
    background-size: cover;
    background-position: center;
    padding: 50px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ボタン本体 */
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--brand); /* 定義済みブランドカラー #5b7cff */
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 14px 28px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background 0.3s ease, transform 0.2s ease;
}

/* ホバー時 */
.contact-btn:hover {
    background: #4a63d9; /* 少し濃い目 */
    transform: translateY(-2px);
}

/* SVGアイコン調整 */
.contact-btn svg {
    flex-shrink: 0;
    color: currentColor;
}
.pie img {
    width: 100%;
    height: auto;
    max-width: 160px;
    display: block;
    margin: 8px auto;
}

/* SPなどでは改行させない */
.br-pc {
    display: none;
}

/* 901以上は改行処理 */
@media (min-width: 901px) {
    .br-pc {
        display: inline;
    }
}