@charset "UTF-8";

/* ==========================================================================
   Utility Classes (utility.css)
   FLOCSSユーティリティ設計思想に基づいた汎用クラス定義
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Text Alignment & Typography
   -------------------------------------------------------------------------- */
.u-text-left {
    text-align: left !important;
}

.u-text-center {
    text-align: center !important;
}

.u-text-right {
    text-align: right !important;
}

.u-font-normal {
    font-weight: 400 !important;
}

.u-font-medium {
    font-weight: 500 !important;
}

.u-font-bold {
    font-weight: 700 !important;
}

/* Text Colors */
.u-text-brand {
    color: #6e2c2c !important;
}

.u-text-magenta {
    color: #7c1649 !important;
}

.u-text-black {
    color: #333333 !important;
}

.u-text-muted {
    color: #666666 !important;
}

.u-text-white {
    color: #ffffff !important;
}

/* Hover Action Utility */
.u-hover-underline {
    text-decoration: none;
}

.u-hover-underline:hover {
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   2. Display & Visibility
   -------------------------------------------------------------------------- */
.u-d-block {
    display: block !important;
}

.u-d-inline-block {
    display: inline-block !important;
}

.u-d-flex {
    display: flex !important;
}

.u-d-none {
    display: none !important;
}

/* PC / SP 表示切り替え */
.u-pc-only {
    display: block !important;
}

.u-sp-only {
    display: none !important;
}

.u-hidden-pc {
    display: none !important;
}

.u-hidden-sp {
    display: block !important;
}

@media screen and (max-width: 768px) {
    .u-pc-only {
        display: none !important;
    }

    .u-sp-only {
        display: block !important;
    }

    .u-hidden-pc {
        display: block !important;
    }

    .u-hidden-sp {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   3. Spacing - Margins
   -------------------------------------------------------------------------- */
.u-m-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}
.u-ml-auto {
    margin-left: auto !important;
}

/* Margin Top */
.u-mt-0 {
    margin-top: 0 !important;
}

.u-mt-8 {
    margin-top: 8px !important;
}

.u-mt-10 {
    margin-top: 10px !important;
}

.u-mt-16 {
    margin-top: 16px !important;
}

.u-mt-20 {
    margin-top: 20px !important;
}

.u-mt-24 {
    margin-top: 24px !important;
}

.u-mt-30 {
    margin-top: 30px !important;
}

.u-mt-40 {
    margin-top: 40px !important;
}

.u-mt-60 {
    margin-top: 60px !important;
}

.u-mt-64 {
    margin-top: 64px !important;
}

.u-mt-80 {
    margin-top: 80px !important;
}

.u-mt-96 {
    margin-top: 96px !important;
}

.u-mt-120 {
    margin-top: 120px !important;
}

/* Margin Bottom */
.u-mb-0 {
    margin-bottom: 0 !important;
}

.u-mb-8 {
    margin-bottom: 8px !important;
}

.u-mb-10 {
    margin-bottom: 10px !important;
}

.u-mb-12 {
    margin-bottom: 12px !important;
}

.u-mb-16 {
    margin-bottom: 16px !important;
}

.u-mb-20 {
    margin-bottom: 20px !important;
}

.u-mb-24 {
    margin-bottom: 24px !important;
}

.u-mb-30 {
    margin-bottom: 30px !important;
}

.u-mb-32 {
    margin-bottom: 32px !important;
}

.u-mb-40 {
    margin-bottom: 40px !important;
}

.u-mb-60 {
    margin-bottom: 60px !important;
}

.u-mb-64 {
    margin-bottom: 64px !important;
}

.u-mb-80 {
    margin-bottom: 80px !important;
}

.u-mb-96 {
    margin-bottom: 96px !important;
}

.u-mb-100 {
    margin-bottom: 100px !important;
}

.u-mb-120 {
    margin-bottom: 120px !important;
}

/* --------------------------------------------------------------------------
   4. Spacing - Paddings
   -------------------------------------------------------------------------- */
.u-p-0 {
    padding: 0 !important;
}

.u-pt-0 {
    padding-top: 0 !important;
}

.u-pb-0 {
    padding-bottom: 0 !important;
}

.u-pt-20 {
    padding-top: 20px !important;
}

.u-pb-20 {
    padding-bottom: 20px !important;
}

.u-pt-24 {
    padding-top: 24px !important;
}

.u-pb-24 {
    padding-bottom: 24px !important;
}

.u-pt-40 {
    padding-top: 40px !important;
}

.u-pb-40 {
    padding-bottom: 40px !important;
}

.u-pt-60 {
    padding-top: 60px !important;
}

.u-pb-60 {
    padding-bottom: 60px !important;
}

.u-pt-64 {
    padding-top: 64px !important;
}

.u-pb-64 {
    padding-bottom: 64px !important;
}

/* --------------------------------------------------------------------------
   5. Flex Helpers
   -------------------------------------------------------------------------- */
.u-flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.u-flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.u-flex-wrap {
    flex-wrap: wrap !important;
}

.u-flex-column {
    flex-direction: column !important;
}

/* --------------------------------------------------------------------------
   6. Images & Media
   -------------------------------------------------------------------------- */
.u-img-fluid {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

.u-of-cover {
    object-fit: cover !important;
}

.u-cursor-pointer {
    cursor: pointer !important;
}

/* --------------------------------------------------------------------------
   7. SP Modifiers (--sp) for All Utility Classes
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* Text Alignment & Typography */
    .u-text-left--sp {
        text-align: left !important;
    }

    .u-text-center--sp {
        text-align: center !important;
    }

    .u-text-right--sp {
        text-align: right !important;
    }

    .u-font-normal--sp {
        font-weight: 400 !important;
    }

    .u-font-medium--sp {
        font-weight: 500 !important;
    }

    .u-font-bold--sp {
        font-weight: 700 !important;
    }

    /* Text Colors */
    .u-text-brand--sp {
        color: #6e2c2c !important;
    }

    .u-text-magenta--sp {
        color: #7c1649 !important;
    }

    .u-text-black--sp {
        color: #333333 !important;
    }

    .u-text-muted--sp {
        color: #666666 !important;
    }

    .u-text-white--sp {
        color: #ffffff !important;
    }

    /* Display & Visibility */
    .u-d-block--sp {
        display: block !important;
    }

    .u-d-inline-block--sp {
        display: inline-block !important;
    }

    .u-d-flex--sp {
        display: flex !important;
    }

    .u-d-none--sp {
        display: none !important;
    }

    /* Margins */
    .u-m-auto--sp {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .u-mt-0--sp {
        margin-top: 0 !important;
    }

    .u-mt-8--sp {
        margin-top: 8px !important;
    }

    .u-mt-10--sp {
        margin-top: 10px !important;
    }

    .u-mt-16--sp {
        margin-top: 16px !important;
    }

    .u-mt-20--sp {
        margin-top: 20px !important;
    }

    .u-mt-24--sp {
        margin-top: 24px !important;
    }

    .u-mt-30--sp {
        margin-top: 30px !important;
    }

    .u-mt-40--sp {
        margin-top: 40px !important;
    }

    .u-mt-60--sp {
        margin-top: 60px !important;
    }

    .u-mt-64--sp {
        margin-top: 64px !important;
    }

    .u-mt-80--sp {
        margin-top: 80px !important;
    }

    .u-mt-96--sp {
        margin-top: 96px !important;
    }

    .u-mt-120--sp {
        margin-top: 120px !important;
    }

    .u-mb-0--sp {
        margin-bottom: 0 !important;
    }

    .u-mb-8--sp {
        margin-bottom: 8px !important;
    }

    .u-mb-10--sp {
        margin-bottom: 10px !important;
    }

    .u-mb-12--sp {
        margin-bottom: 12px !important;
    }

    .u-mb-16--sp {
        margin-bottom: 16px !important;
    }

    .u-mb-20--sp {
        margin-bottom: 20px !important;
    }

    .u-mb-24--sp {
        margin-bottom: 24px !important;
    }

    .u-mb-30--sp {
        margin-bottom: 30px !important;
    }

    .u-mb-32--sp {
        margin-bottom: 32px !important;
    }

    .u-mb-40--sp {
        margin-bottom: 40px !important;
    }

    .u-mb-60--sp {
        margin-bottom: 60px !important;
    }

    .u-mb-64--sp {
        margin-bottom: 64px !important;
    }

    .u-mb-80--sp {
        margin-bottom: 80px !important;
    }

    .u-mb-96--sp {
        margin-bottom: 96px !important;
    }

    .u-mb-120--sp {
        margin-bottom: 120px !important;
    }

    /* Paddings */
    .u-p-0--sp {
        padding: 0 !important;
    }

    .u-pt-0--sp {
        padding-top: 0 !important;
    }

    .u-pb-0--sp {
        padding-bottom: 0 !important;
    }

    .u-pt-20--sp {
        padding-top: 20px !important;
    }

    .u-pb-20--sp {
        padding-bottom: 20px !important;
    }

    .u-pt-24--sp {
        padding-top: 24px !important;
    }

    .u-pb-24--sp {
        padding-bottom: 24px !important;
    }

    .u-pt-40--sp {
        padding-top: 40px !important;
    }

    .u-pb-40--sp {
        padding-bottom: 40px !important;
    }

    .u-pt-60--sp {
        padding-top: 60px !important;
    }

    .u-pb-60--sp {
        padding-bottom: 60px !important;
    }

    .u-pt-64--sp {
        padding-top: 64px !important;
    }

    .u-pb-64--sp {
        padding-bottom: 64px !important;
    }

    /* Flex Helpers */
    .u-flex-center--sp {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .u-flex-between--sp {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .u-flex-wrap--sp {
        flex-wrap: wrap !important;
    }

    .u-flex-column--sp {
        flex-direction: column !important;
    }

    /* Images & Media */
    .u-img-fluid--sp {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .u-of-cover--sp {
        object-fit: cover !important;
    }

    /* Order Utilities */
    .u-order-1--sp,
    .u-sp-order-1 {
        order: 1 !important;
    }

    .u-order-2--sp,
    .u-sp-order-2 {
        order: 2 !important;
    }

    .u-order-3--sp,
    .u-sp-order-3 {
        order: 3 !important;
    }

    .u-order-4--sp,
    .u-sp-order-4 {
        order: 4 !important;
    }

    .u-order-5--sp,
    .u-sp-order-5 {
        order: 5 !important;
    }

    .u-order-6--sp,
    .u-sp-order-6 {
        order: 6 !important;
    }

    .u-order-first--sp,
    .u-sp-order-first {
        order: -1 !important;
    }

    .u-order-last--sp,
    .u-sp-order-last {
        order: 999 !important;
    }
}

/* SP時のみ画像を横スクロールさせるクラス */
@media screen and (max-width: 768px) {
    .u-sp-scrollable-img {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    .u-sp-scrollable-caption {
        color: #595757;
        text-align: right;
        font-size: 14px;
        letter-spacing: 0.08em;
    }

    .u-sp-scrollable-img picture {
        display: inline-block !important;
        white-space: nowrap;
    }
    .u-sp-scrollable-img img {
        max-width: none !important;
    }
}

.u-fz-14 {
    font-size: 14px;
}

.u-fz-14--sp {
    font-size: 14px;
}

.u-fz-18 {
    font-size: 18px;
}

.u-fz-18--sp {
    font-size: 18px;
}

.u-fz-sm {
    font-size: 80%;
}

/* 視覚的には隠し、スクリーンリーダーにのみ読み上げさせるユーティリティクラス */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}