:root{
    --shadow-1: 0 10px 30px rgba(16,24,40,.08);
    --r-2xl: 28px;
    --tab-bw: 4px;
}

/* ===== ヘッダー（小ラベル／ドット／メイン見出し／背景テキスト） ===== */
.cat-head{
    position: relative;
    margin: 0 0 16px;
    padding-top: 4px;
}
.cat-head__row{
    display: flex;
    flex-direction: column;   /* ← これで縦並び */
    align-items: flex-start;  /* 左寄せ */
    gap: 6px;
    margin-bottom: 8px;
}

.cat-head__dots{
    width: 65px;
    height: auto;
    object-fit: cover;
    display: block;
    margin-top: 10px;
}
.cat-head__small{
    font-size: 18px; line-height:1; font-weight: 700; color:#333;
}
.cat-head__title{
    font-size: 31px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0;
    color: #111;
    position: relative;
    z-index: 2;
}
.cat-head__bg{
    position: absolute;
    left: -138px;
    top: 67px;
    font-weight: 800;
    font-size: 109px;
    line-height: 1;
    color: #eceef3;
    letter-spacing: .01px;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    transform: translateY(-13%) scaleX(0.78);
    opacity: 0.7;
}

.cat-wrap{
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (max-width: 1024px){
    .cat-head{ margin-bottom: 12px; }
    .cat-head__title{font-size: clamp(20px, 3.6vw, 31px);}
    .cat-head__bg{ font-size: 12vw; top: 60px; left:0; transform: translateY(-10%); }
}
/* WYSIWYG内改行のためのユーティリティ（PCでは非表示、SPで表示したい改行用） */
.sp-only{ display:none; }
@media (max-width: 640px){ .sp-only{ display:inline; } }

/* ===== タブセット ===== */
/* セット全体の色はインライン style で --accent / --accent-weak を受け取る */
.cat-tabset{ --accent: #ED7F67; --accent-weak: rgba(237,127,103,.15); margin-top: 47px; }

/* タブ見出し */
.cat-tabs{
    display:flex; gap:24px; align-items:flex-end;
    position:relative;
    margin:0 0 calc(-1 * var(--tab-bw)) 0;
    width:100%;
}

/* 各タブは自分専用の --tab-accent / --tab-weak を inline style で持つ */
.cat-tab{
    position:relative;
    display:flex; align-items:center; gap:12px; justify-content:center;
    flex:1 1 0; min-width:0;
    background:#fff;
    border: var(--tab-bw) solid var(--tab-accent, #999);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    color: var(--tab-accent, #333);
    padding:35px 22px;
    font-weight:800;
    box-shadow:0 1px 0 rgba(0,0,0,.02);
    container-type: inline-size;
}
.cat-tab .label{ font-size: clamp(9px, 9cqw, 31px);}
.cat-tab .icon{ width:52px; height:52px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.cat-tab img{ max-width:100%; max-height:100%; object-fit:contain; }

.cat-tab.is-active{ z-index:5; }
.cat-tab.is-active::after{
    content:""; position:absolute; left: calc(-1 * var(--tab-bw)); right: calc(-1 * var(--tab-bw)); bottom: calc(-1 * var(--tab-bw));
    background:#fff;
}

/* パネル */
.cat-panel{
    background:#fff;
    border: var(--tab-bw) solid var(--accent);
    border-radius: 11px;
    padding:14px 20px 8px 20px;
    min-height: 263px;
    position: relative;
    z-index: 2;
}
.cat-panel::before{
    content:""; position:absolute; left:0; right:0; top: calc(-1 * var(--tab-bw));
    height:0; border-top: var(--tab-bw) solid var(--accent);
    z-index:2; pointer-events:none;
}

/* パネル表示切替 */
.cat-pane[hidden]{ display:none; }
.cat-pane.is-active{ display:block; }

/* コースボタン：親セットの --accent / --accent-weak を使用 */
.courses{ display:flex; flex-wrap:wrap; gap:18px; }
.course{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    max-width: 170px;
    height: 97px;
    text-align: center;
    border-radius: clamp(10px, 3.2vw, 20px);
    background: var(--accent-weak);
    color: #FFFFFF;
    font-weight: 800;
    text-decoration: none;
    transition: .15s;
    font-size: 20px;
    letter-spacing: normal;
    padding: 0 15px;
    border: none;
    line-height: 20px;
}
.course.course-strong{ box-shadow: unset; }
.course:hover{ background:var(--accent); color:#fff; transform:translateY(-1px); }

/* 端タブ時の角丸連結 */
.cat-tabset[data-edge="left"]  .cat-panel{ border-top-left-radius: 0; }
.cat-tabset[data-edge="right"] .cat-panel{ border-top-right-radius: 0; }

/* ===== Tablet ===== */
@media (max-width: 1024px){
    .cat-tabset { margin-top: 27px; }
    .cat-tabs { gap: 2px; }
    .cat-tab { padding: 10px 5px;
        gap: 6px;
        min-height: 70px; }
    .cat-panel {
        padding: 14px 20px;
    }

    /* ★ コースボタン：幅/高さ/文字/パディングを流体化（上限＝元値） */
    .course {
        flex: 0 0 clamp(200px, 22vw + 80px, 262px);
        max-width: clamp(196px, 25vw + 42px, 262px);
        font-size: clamp(11px, 1.8vw + 1px, 31px);
        padding: clamp(8px, 1.2vw + 4px, 14px);
        height: clamp(58px, 14.2vw, 109px);
        flex: 0;
        min-width: calc(50% - 10px);
        line-height: 1.2;
    }
    /* ラベルはそのまま container query を活かす（最大31px） */
    .cat-tab .label{ font-size: clamp(15px, 11cqw, 31px); }

    /* ★ アイコンを可変（正方形）：最小18px〜最大従来相当まで */
    .cat-tab .icon{
        width: clamp(18px, 2.4vw + 6px, 36px);
        height: clamp(18px, 2.4vw + 6px, 36px);
    }

    .courses { justify-content: center; gap: 25px; }
    .cat-wrap { margin: 0 20px; }

    /* セクション小見出し：最大34px */
    .cat-head__small { font-size: clamp(18px, 2.2vw + 10px, 34px); }

    .cat-head__dots {
        width: 40px;
        height: auto;
        object-fit: cover;
        display: block;
        margin-top: 10px;
    }

    .courses { justify-content: space-between; gap: clamp(10px, 2.5vw + 5px, 25px); /* 最小10px → 最大25px */ }
}
.isa-br { display:inline; }
.isa-br--all { display:inline; }
.isa-br--pc, .isa-br--sp { display:none; }
@media (min-width:1025px){ .isa-br--pc { display:inline; } }
@media (max-width:1024px){ .isa-br--sp { display:inline; } }

@media (max-width: 503px){
    .courses {
        gap: clamp(7px, 2.5vw + 5px, 25px);
    }
}