/* ===========================================
   Button Components
   =========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;                               /* 間隔6px */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
}

.btn-small {
    gap: 10px;                              /* Small版は間隔10px */
    font-size: var(--font-size-body-5);
    width: 110px;                        /* 固定幅110px */
    height: 26px;                        /* 固定高さ26px */
}    

/* アイコン部分 */
.btn .btn-icon {
    width: 20px;
    height: 20px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 12px;
}

/* ===========================================
   Block Header Component 
   =========================================== */
.block-header {
    width: 1200px;                          /* 固定幅1200px */
    height: auto;                           
    min-height: 68px;                       /* 内包68px */
    padding: 0 32px;                        /* 左右32px */
    margin-top: 207px;                      /* 上207px */
    display: flex;
    flex-direction: column;                 /* 垂直フロー */
    align-items: center;                    /* Center配置 */
    gap: 12px;                             /* 間隔12px */
}

/* Block Header Label（上部英語ラベル） */
.block-header .block-label {
    width: 50px;                           /* 固定幅50px */
    height: 22px;                          /* 固定高さ22px */
    font-family: "Zen Kaku Gothic New", var(--font-family-sans);
    font-size: 14px;                       /* Font_Body #5 */
    font-weight: 700;                      /* Bold */
    line-height: 1.6;                      /* 160% */
    letter-spacing: 0px;                   /* 文字間隔0px */
    color: #BBBBBB;                        /* Text color #3 */
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text Container */
.block-header .text-container {
    width: 800px;                          /* 固定幅800px */
    height: auto;
    min-height: 68px;                      /* 内包68px */
    display: flex;
    flex-direction: column;                /* 垂直フロー */
    align-items: center;                   /* 中央配置 */
    gap: 8px;                             /* 間隔8px */
}

/* Heading Supporting Text */
.block-header .heading-supporting-text {
    width: 100%;                           /* 塗り(800px継承) */
    height: auto;
    min-height: 38px;                      /* 内包38px */
    display: flex;
    flex-direction: column;                /* 垂直フロー */
    align-items: center;                   /* 中央配置 */
    gap: 16px;                            /* 間隔16px */
}

/* 階層構造に基づくスタイル */
.block-header .text-container .heading-supporting-text h2 {
    font-family: var(--font-family-heading);  /* 明朝体 */
    font-size: var(--font-size-title-2);      /* 24px */
    font-weight: var(--font-weight-bold);      /* 700 */
    color: var(--text-primary);
    margin: 0;
}

.block-header .text-container .heading-supporting-text p {
    font-family: var(--font-family-body);      /* ゴシック体 */
    font-size: var(--font-size-body-3);       /* 18px */
    font-weight: var(--font-weight-normal);    /* 400 */
    color: var(--text-tertiary);
    margin: 0;
    text-align: center;
}

/* プロパティ制御 */
.block-header.center {
    text-align: center;
    align-items: center;
}