/* Figma System - 2025.02.12 */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-jp-dynamic-subset.min.css");

/* BackGroundColor */
.maho-bg-black {
    background-color: #212121;
}
.maho-bg-black-2 {
    background-color: #2B2B32;
}
.maho-bg-white {
    background-color: #FFFFFF;
}
.maho-bg-gray-1 {
    background-color: #F5F5F5;
}
.maho-bg-gray-2 {
    background-color: #DFDFDF;
}
.maho-bg-gray-3 {
    background-color: #AEAEAE;
}
.maho-bg-gray-4 {
    background-color: #737373;
}
.maho-bg-gray-5 {
    background-color: #414141;
}
.maho-bg-main {
    background-color: #FF8E37;
}
.maho-bg-main-light {
    background-color: #FFEFDD;
}
.maho-bg-sub {
    background-color: #F05A2B;
}
.maho-bg-error {
    background-color: #FF3636;
}
.maho-bg-success {
    background-color: #00AC22;
}

/* Font Color */
.maho-c-black {
    color: #212121;
}
.maho-c-white {
    color: #FFFFFF;
}
.maho-c-gray-1 {
    color: #F5F5F5;
}
.maho-c-gray-2 {
    color: #DFDFDF;
}
.maho-c-gray-3 {
    color: #AEAEAE;
}
.maho-c-gray-4 {
    color: #737373;
}
.maho-c-gray-5 {
    color: #414141;
}
.maho-c-main {
    color: #FF8E37;
}
.maho-c-sub {
    color: #F05A2B;
}
.maho-c-error {
    color: #FF3636;
}
.maho-c-success {
    color: #00AC22;
}

/* Font Style */
.maho-h-font-0 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
}
.maho-h-font-1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
}
.maho-h-font-2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 26px;
}
.maho-h-font-3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
}
.maho-b-font-1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
}
.maho-b-font-2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
}
.maho-b-font-3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}
.maho-d-font-1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}
.maho-btn-font-1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 22px;
}
.maho-btn-font-2 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
}
.maho-btn-font-3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}
.maho-cap-font-1 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: 10px;
    line-height: 14px;
}

.maho-btn-orange {
    background-color: #FF8E37;
    color: #FFFFFF;
    border: 1px solid #FF8E37;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
}
.maho-btn-orange:hover {
    background-color: #F05A2B;
}
.maho-btn-gray {
    background-color: #DFDFDF;
    color: #FFFFFF;
    border: 1px solid #DFDFDF;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
}
.maho-btn-gray:hover {
    background-color: #AEAEAE;
}
.maho-btn-white {
    background-color: #FFFFFF;
    color: #FF8E37;
    border: 1px solid #FF8E37;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
}
.maho-btn-white:hover {
    background-color: #ffdfc7;
}

/* share icon: replace xeicon xi-share-alt-o glyph with icon_share-v2.svg.
   size via font-size (width/height 1em), color via currentColor (background). */
i.xi-share-alt-o:before { content: none; }
i.xi-share-alt-o {
    display: inline-block;
    width: 1.3em;
    height: 1.3em;
    background-color: currentColor;
    -webkit-mask: url('/user/img/icon_share-v2.svg') no-repeat center / contain;
            mask: url('/user/img/icon_share-v2.svg') no-repeat center / contain;
    vertical-align: middle;
}