.ec-FaqCategoryRole {
    margin-top: 60px;
    padding: 0 0 60px;
}

/* タイトルエリア */
.ec-FaqCategoryRole .ttl-area {
    position: relative;
    padding: 30px 20px 20px;
    display: grid;
    place-items: center;
    row-gap: 12px;
    margin-bottom: 30px;
}
.ec-FaqCategoryRole .ttl-area::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 21px;
    height: 4px;
    background: url(../img/common/ttl_line.png) left top no-repeat;
    background-size: 21px 4px;
    transform: translateX(-50%);
}
.ec-FaqCategoryRole .ttl-area .icon {
    display: block;
    width: 22px;
    height: 24px;
    margin-inline: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.ec-FaqCategoryRole.--furisode .ttl-area .icon {
    background-image: url(../img/faq/icon_furisode.webp);
}
.ec-FaqCategoryRole.--hakama .ttl-area .icon {
    background-image: url(../img/faq/icon_hakama.webp);
}
.ec-FaqCategoryRole.--other .ttl-area .icon {
    background-image: url(../img/faq/icon_question.webp);
}
.ec-FaqCategoryRole .ttl-area .sub {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.65px;
    color: #03071f;
    text-align: center;
}
.ec-FaqCategoryRole .ttl-area .main {
    font-family: "Oswald", sans-serif;
    font-size: 3.1rem;
    letter-spacing: 4.08px;
    color: #525263;
}
.ec-FaqCategoryRole .ttl-area .sub::before {
    content: "";
    width: 22px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.ec-FaqCategoryRole.--furisode .ttl-area .sub::before {
    background-image: url(../img/faq/icon_furisode.webp);
}
.ec-FaqCategoryRole.--hakama .ttl-area .sub::before {
    background-image: url(../img/faq/icon_hakama.webp);
}
.ec-FaqCategoryRole.--other .ttl-area .sub::before {
    background-image: url(../img/faq/icon_question.webp);
}

/* タブ(親カテゴリ切り替え) */
.ec-FaqCategoryRole .faq-tab {
    display: flex;
}
.ec-FaqCategoryRole .tab-item {
    flex: 1;
    padding: 15px 4px 20px;
    text-align: center;
    border-bottom: 4px solid #e5e5e5;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: calc(22 / 13);
    letter-spacing: 0.65px;
    color: #e5e5e5;
}
.ec-FaqCategoryRole .tab-item span {
    font-weight: 700;
}
.ec-FaqCategoryRole .tab-item a {
    display: block;
    color: inherit;
}
.ec-FaqCategoryRole .tab-item.active {
    color: #241916;
}
.ec-FaqCategoryRole .tab-item.--furisode {
    border-bottom-color: #FFD7DD;
}
.ec-FaqCategoryRole .tab-item.--furisode.active {
    border-bottom-color: #ff788a;
}
.ec-FaqCategoryRole .tab-item.--hakama {
    border-bottom-color: #D4F0F9;
}
.ec-FaqCategoryRole .tab-item.--hakama.active {
    border-bottom-color: #65CAED;
}
.ec-FaqCategoryRole .tab-item.--other {
    border-bottom-color: #e5e5e5;
}
.ec-FaqCategoryRole .tab-item.--other.active {
    border-bottom-color:#666666;
}

/* カテゴリピル一覧 */
.ec-FaqCategoryRole .faq-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 30px 17px 0;
}
.ec-FaqCategoryRole .faq-pill {
    border-radius: 12px;
    background: #f6f3f4;
}
.ec-FaqCategoryRole .faq-pill a,
.ec-FaqCategoryRole .faq-pill span {
    display: block;
    padding: 4px 8px;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
}
.ec-FaqCategoryRole .faq-pill.active {
    background: #000;
}
.ec-FaqCategoryRole .faq-pill.active a,
.ec-FaqCategoryRole .faq-pill.active span {
    color: #fff;
}

/* 質問エリア見出し */
.ec-FaqCategoryRole .question-area {
    margin-top: 55px;
    padding: 0 20px;
}
.ec-FaqCategoryRole .ttl_style_line {
    position: relative;
    padding-left: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #e5e5e5;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.65px;
    color: #03071f;
}
.ec-FaqCategoryRole.--furisode .ttl_style_line {
    border-left-color: #ff788a;
}
.ec-FaqCategoryRole.--hakama .ttl_style_line {
    border-left-color: #d4f0f9;
}
.ec-FaqCategoryRole.--other .ttl_style_line {
    border-left-color: #e5e5e5;
}

/* 質問回答(常時表示) */
.ec-FaqCategoryRole .question-box {
    padding-bottom: 50px;
}
.ec-FaqCategoryRole .accordion-menu {
    border-top: 2px solid #000;
}
.ec-FaqCategoryRole .accordion-menu dt {
    position: relative;
    padding: 18px 0;
}
.ec-FaqCategoryRole .accordion-menu dd {
    display: block;
    padding: 0 0 18px;
    line-height: 1.5;
}
.ec-FaqCategoryRole .no-faq {
    padding: 30px 0;
    text-align: center;
    font-size: 1.3rem;
    color: #03071f;
}
.ec-FaqCategoryRole dl .q-ico,
.ec-FaqCategoryRole dl .a-ico {
    position: relative;
    display: inline-block;
    padding-left: 40px;
    padding-right: 25px;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.5;
}
.ec-FaqCategoryRole dl .q-ico {
    font-weight: bold;
    padding-right: 30px;
}
.ec-FaqCategoryRole dl .q-ico::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: url(../img/faq/icon_q.png) left top no-repeat;
    background-size: 30px 30px;
}
.ec-FaqCategoryRole dl .a-ico::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background: url(../img/faq/icon_a.png) left top no-repeat;
    background-size: 30px 30px;
}
.ec-FaqCategoryRole dl .a-ico p {
    font-size: 1.3rem;
    font-weight: 500;
    word-break: break-all;
}
.ec-FaqCategoryRole dl .a-ico img {
    width: 100%;
    height: auto;
}
.ec-FaqCategoryRole dl .a-ico a:not(.link_button) {
    font-weight: 500;
    text-decoration: underline;
    color: #03071f;
}
.ec-FaqCategoryRole dl .a-ico a:not(.link_button):hover {
    color: #03071f;
}
.ec-FaqCategoryRole dl .a-ico .link_button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: 12px 30px;
    border-radius: 100px;
    background-color: #000;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    line-height: calc(16 / 13);
    text-align: center;
}
.ec-FaqCategoryRole dl .a-ico .link_button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 9px;
    height: 12px;
    background: url(../img/common/btn_arrow_white.webp) no-repeat center center / contain;
    transform: translateY(-50%);
}

/* カテゴリから探す(下部) */
.ec-FaqCategoryRole .category-search-area {
    margin-top: 60px;
    padding: 60px 20px;
    background: #ffdade;
    text-align: center;
}
.ec-FaqCategoryRole .category-search-area.--hakama {
    background: #cee8f1;
}
.ec-FaqCategoryRole .category-search-area.--other {
    background: #f3f3f3;
}
.ec-FaqCategoryRole .category-search-area .ttl {
    margin-bottom: 30px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.65px;
    color: #03071f;
}
.ec-FaqCategoryRole .category-search-area .faq-pills {
    padding: 0;
    margin-bottom: 30px;
}
.ec-FaqCategoryRole .category-search-area .faq-pill {
    background: #fff;
}
.ec-FaqCategoryRole .category-search-area .faq-pill.active {
    background: #000;
}
.ec-FaqCategoryRole .category-search-area .tab-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 275px;
    margin: 0 auto;
    padding: 17px 30px;
    border-radius: 100px;
    background-color: #000;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    line-height: calc(16 / 13);
    text-align: center;
}
.ec-FaqCategoryRole .category-search-area .tab-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 9px;
    height: 12px;
    background: url(../img/common/btn_arrow_white.webp) no-repeat center center / contain;
    transform: translateY(-50%);
}

/* 袴のサイズ表 */
#ec-hakamaSizeTableRole {
    padding: 30px 15px;
}