@charset "utf-8";

/*============================================================

Utilities

============================================================*/


/*============================================================
Width
============================================================*/

/* px */
.w-100px { width: 100px !important; }
.w-90px  { width: 90px !important; }
.w-80px  { width: 80px !important; }
.w-70px  { width: 70px !important; }
.w-60px  { width: 60px !important; }
.w-50px  { width: 50px !important; }
.w-40px  { width: 40px !important; }


/* % */
.w-100 { width: 100% !important; }
.w-90  { width: 90% !important; }
.w-80  { width: 80% !important; }
.w-75  { width: 75% !important; }
.w-66  { width: 66.666% !important; }
.w-60  { width: 60% !important; }
.w-50  { width: 50% !important; }
.w-45  { width: 45% !important; }
.w-40  { width: 40% !important; }
.w-33  { width: 33.333% !important; }
.w-25  { width: 25% !important; }


/*============================================================
Max Width
============================================================*/

/* px */
.max-w-300 { max-width: 300px !important; }
.max-w-400 { max-width: 400px !important; }
.max-w-500 { max-width: 500px !important; }
.max-w-600 { max-width: 600px !important; }


/* % */
.max-w-25  { max-width: 25% !important; }
.max-w-30  { max-width: 30% !important; }
.max-w-33  { max-width: 33.333% !important; }
.max-w-40  { max-width: 40% !important; }
.max-w-50  { max-width: 50% !important; }
.max-w-60  { max-width: 60% !important; }
.max-w-75  { max-width: 75% !important; }
.max-w-100 { max-width: 100% !important; }


/*============================================================
Font Size
============================================================*/

.f-10 { font-size: 1rem !important; }
.f-11 { font-size: 1.1rem !important; }
.f-12 { font-size: 1.2rem !important; }
.f-13 { font-size: 1.3rem !important; }
.f-14 { font-size: 1.4rem !important; }


/*============================================================
Line Height
============================================================*/

.lh-10 { line-height: 1 !important; }
.lh-11 { line-height: 1.1 !important; }
.lh-12 { line-height: 1.2 !important; }
.lh-13 { line-height: 1.3 !important; }
.lh-14 { line-height: 1.4 !important; }
.lh-15 { line-height: 1.5 !important; }
.lh-16 { line-height: 1.6 !important; }
.lh-17 { line-height: 1.7 !important; }
.lh-18 { line-height: 1.8 !important; }
.lh-19 { line-height: 1.9 !important; }
.lh-20 { line-height: 2 !important; }


/*============================================================
Text Align
============================================================*/

.ta-l {
    text-align: left !important;
}

.ta-c {
    text-align: center !important;
}

.ta-r {
    text-align: right !important;
}

.ta-j {
    text-align: justify !important;
    text-justify: inter-ideograph;
}


/*============================================================
Font Weight
============================================================*/

.fw-b {
    font-weight: 700 !important;
}

.fw-n {
    font-weight: 400 !important;
}


/*============================================================
Margin
============================================================*/

/*
基本単位
0 / 0.5 / 1 / 1.5 / 2 / 2.5 / 3 / 4 / 5em
*/


/* All */
.m-0  { margin: 0 !important; }
.m-05 { margin: .5em !important; }
.m-10 { margin: 1em !important; }
.m-15 { margin: 1.5em !important; }
.m-20 { margin: 2em !important; }
.m-25 { margin: 2.5em !important; }
.m-30 { margin: 3em !important; }
.m-40 { margin: 4em !important; }
.m-50 { margin: 5em !important; }


/* Top */
.mt-0  { margin-top: 0 !important; }
.mt-05 { margin-top: .5em !important; }
.mt-10 { margin-top: 1em !important; }
.mt-15 { margin-top: 1.5em !important; }
.mt-20 { margin-top: 2em !important; }
.mt-25 { margin-top: 2.5em !important; }
.mt-30 { margin-top: 3em !important; }
.mt-40 { margin-top: 4em !important; }
.mt-50 { margin-top: 5em !important; }


/* Bottom */
.mb-0  { margin-bottom: 0 !important; }
.mb-05 { margin-bottom: .5em !important; }
.mb-10 { margin-bottom: 1em !important; }
.mb-15 { margin-bottom: 1.5em !important; }
.mb-20 { margin-bottom: 2em !important; }
.mb-25 { margin-bottom: 2.5em !important; }
.mb-30 { margin-bottom: 3em !important; }
.mb-40 { margin-bottom: 4em !important; }
.mb-50 { margin-bottom: 5em !important; }


/* Left */
.ml-0 {
    margin-left: 0 !important;
}

.ml-auto {
    margin-left: auto !important;
}


/* Right */
.mr-0 {
    margin-right: 0 !important;
}

.mr-auto {
    margin-right: auto !important;
}


/* Left + Right */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* Top + Bottom */
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-05 {
    margin-top: .5em !important;
    margin-bottom: .5em !important;
}

.my-10 {
    margin-top: 1em !important;
    margin-bottom: 1em !important;
}

.my-15 {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
}

.my-20 {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
}

.my-30 {
    margin-top: 3em !important;
    margin-bottom: 3em !important;
}


/*============================================================
Padding
============================================================*/

/* All */
.p-0  { padding: 0 !important; }
.p-05 { padding: .5em !important; }
.p-10 { padding: 1em !important; }
.p-15 { padding: 1.5em !important; }
.p-20 { padding: 2em !important; }
.p-25 { padding: 2.5em !important; }
.p-30 { padding: 3em !important; }
.p-40 { padding: 4em !important; }
.p-50 { padding: 5em !important; }


/* Top */
.pt-0  { padding-top: 0 !important; }
.pt-05 { padding-top: .5em !important; }
.pt-10 { padding-top: 1em !important; }
.pt-15 { padding-top: 1.5em !important; }
.pt-20 { padding-top: 2em !important; }
.pt-25 { padding-top: 2.5em !important; }
.pt-30 { padding-top: 3em !important; }
.pt-40 { padding-top: 4em !important; }
.pt-50 { padding-top: 5em !important; }


/* Bottom */
.pb-0  { padding-bottom: 0 !important; }
.pb-05 { padding-bottom: .5em !important; }
.pb-10 { padding-bottom: 1em !important; }
.pb-15 { padding-bottom: 1.5em !important; }
.pb-20 { padding-bottom: 2em !important; }
.pb-25 { padding-bottom: 2.5em !important; }
.pb-30 { padding-bottom: 3em !important; }
.pb-40 { padding-bottom: 4em !important; }
.pb-50 { padding-bottom: 5em !important; }


/* Left */
.pl-0  { padding-left: 0 !important; }
.pl-05 { padding-left: .5em !important; }
.pl-10 { padding-left: 1em !important; }
.pl-15 { padding-left: 1.5em !important; }
.pl-20 { padding-left: 2em !important; }
.pl-30 { padding-left: 3em !important; }


/* Right */
.pr-0  { padding-right: 0 !important; }
.pr-05 { padding-right: .5em !important; }
.pr-10 { padding-right: 1em !important; }
.pr-15 { padding-right: 1.5em !important; }
.pr-20 { padding-right: 2em !important; }
.pr-30 { padding-right: 3em !important; }


/* Left + Right */
.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.px-05 {
    padding-left: .5em !important;
    padding-right: .5em !important;
}

.px-10 {
    padding-left: 1em !important;
    padding-right: 1em !important;
}

.px-15 {
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
}

.px-20 {
    padding-left: 2em !important;
    padding-right: 2em !important;
}

.px-30 {
    padding-left: 3em !important;
    padding-right: 3em !important;
}


/* Top + Bottom */
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-05 {
    padding-top: .5em !important;
    padding-bottom: .5em !important;
}

.py-10 {
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}

.py-15 {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
}

.py-20 {
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}

.py-30 {
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}


/*============================================================
Display
============================================================*/

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

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

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

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

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

.d-grid {
    display: grid !important;
}


/*============================================================
Flex
============================================================*/

/* Justify Content */

.justify-start {
    justify-content: flex-start !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-around {
    justify-content: space-around !important;
}


/* Align Items */

.align-start {
    align-items: flex-start !important;
}

.align-center {
    align-items: center !important;
}

.align-end {
    align-items: flex-end !important;
}

.align-stretch {
    align-items: stretch !important;
}


/* Flex Direction */

.flex-row {
    flex-direction: row !important;
}

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


/* Flex Wrap */

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

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


/*============================================================
Position
============================================================*/

.pos-relative {
    position: relative !important;
}

.pos-absolute {
    position: absolute !important;
}

.pos-fixed {
    position: fixed !important;
}

.pos-sticky {
    position: sticky !important;
}


/*============================================================
Overflow
============================================================*/

.overflow-hidden {
    overflow: hidden !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-visible {
    overflow: visible !important;
}


/*============================================================
Responsive Display
============================================================*/

/*
SP      : 0〜678px
Tablet  : 679〜1024px
PC      : 1025px〜
*/


/* Smartphone：基本値 */

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

.tablet-only {
    display: none !important;
}

.pc-only {
    display: none !important;
}


/* Tablet */

@media screen and (min-width: 679px) {

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

    .tablet-only {
        display: block !important;
    }

}


/* PC */

@media screen and (min-width: 1025px) {

    .tablet-only {
        display: none !important;
    }

    .pc-only {
        display: block !important;
    }

}