/*

できたら、クラス名はtailwindcssの命名ルールに揃える。

https://tailwindcss.com/docs/installation

tailwindcssにルールがなかったら、またはtailwindcssのルールがしっくりこなかったら、Bootstrapのルールに揃える

*/

/*--------- Layout ---------*/

[hidden],
.hidden {
    display: none !important;
}

@media screen and (min-width: 768.02px) {
    
    .is-sp,
    .md\:hidden {
        display: none !important;
    }
    
}

@media screen and (max-width:768px) {

    .is-pc,
    .max-md\:hidden {
        display: none !important;
    }

    .max-md\:inline {
        display: inline !important;
    }

}

/* start 

他のページでは以下になってた

他のページのcssを読み込む状況になるかもしれないので、
同じクラス名は避けた方がいいかも

*/
.view-is-sp {
	display: none;
}
@media screen and (max-width: 768px) {
	.view-is-sp {
	    display: block;
    }
}
.view-is-pc {
	display: block;
}
@media screen and (max-width: 768px) {
	.view-is-pc {
	    display: none;
    }
}
/*
メモ：以下のクラスになってるページもあった

.pc {
	display: inline;
}
.sp {
	display: none;
}

@media screen and (max-width: 768px) {
    .pc {
        display: none;
    }
    .sp {
        display: inline;
    }
}

.pc_only {
	display: inline-block;
}

.sp_only {
	display: none;
}

@media screen and (max-width: 768px) {
	.pc_only {
		display: none;
	}
	.sp_only {
		display: block;
	}
}

.sp_non{
	display: block;
}

.pc_non{
	display: none;
}

@media screen and (max-width: 768px){
	.sp_non{
		display: none;
	}

	.pc_non{
		display: block;
	}
}

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

.u-only-sp {
  display: none !important;
}
@media (max-width: 767.98px) {
    .u-only-sp {
      display: inherit !important;
    }
}

.onlySp {
	display: block !important;
}
.onlyPc {
	display: none !important;
}

.sp_non,
.pc-only {
	display: block;
}

.pc_non,
.sp-only {
	display: none;
}

@media screen and (max-width: 768px) {

	.sp_non,
	.pc-only {
		display: none;
	}

	.pc_non,
	.sp-only {
		display: block;
	}

}

*/
/* end 他のページの状況 */

.visible {
    visibility: visible !important;
}

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

.opacity-100 {
    opacity: 1 !important;
}

.opacity-90 {
    opacity: .9 !important;
}

/* クラス名.blockは、どこかで使ってそう */
.d-block {
    display: block !important;
}

.inline-block {
    display: inline-block !important;
    line-height: inherit !important;
}

/* flexbox */

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

.basis-full {
	flex-basis: 100% !important;
}

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

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

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

@media screen and (max-width: 768px) {
	.max-md\:flex-row-reverse {
        flex-direction: row-reverse;
    }
}

/*--------- Spacing ---------*/

.gap-md {
    gap: 16px;
}

.gap-lg {
    gap: 40px;
}

/*--------- Spacing ---------*/

.m-0 {
    margin: 0 !important;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


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

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

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

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

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

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

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

/* マージンは、m*-数字が既に他で使われているので、TailswindでもBootstrapでもなく独自の命名法にする。 */

.my-xs {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

.mt-xs {
    margin-top: 4px !important;
}

.mb-xs {
    margin-bottom: 4px !important;
}

.my-sm {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

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

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

.my-md {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

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

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

.ml-md {
    margin-left: 16px !important;
}

.my-ml,
.my-md2 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
}

.mt-ml,
.mt-md2 {
    margin-top: 24px !important;
}

.mb-ml,
.mb-md2 {
    margin-bottom: 24px !important;
}

.my-md3 {
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}

.mt-md3 {
    margin-top: 32px !important;
}

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

.my-lg {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

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

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

.my-lg2 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
}

.mt-lg2 {
    margin-top: 48px !important;
}

.mb-lg2 {
    margin-bottom: 48px !important;
}

.my-xl {
    margin-top: 56px !important;
    margin-bottom: 56px !important;
}

.mt-xl {
    margin-top: 56px !important;
}

.mb-xl {
    margin-bottom: 56px !important;
}

.my-xl2 {
    margin-top: 64px !important;
    margin-bottom: 64px !important;
}

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

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

.my-xxl {
    margin-top: 96px !important;
    margin-bottom: 96px !important;
}

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

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


@media screen and (max-width:768px) {

    .max-md\:my-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .max-md\:mt-0 {
        margin-top: 0 !important;
    }

    .max-md\:mb-0 {
        margin-bottom: 0 !important;
    }

}

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

    .md\:my-0 {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .md\:mt-0 {
        margin-top: 0 !important;
    }

    .md\:mb-0 {
        margin-bottom: 0 !important;
    }

}

.p-0 {
    padding: 0 !important;
}

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

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

/*--------- Sizing ---------*/

.w-full {
	width: 100% !important;
}

.w-80px {
    width: 80px !important;
}

.min-h-0 {
    min-height: 0 !important;
}


.w-33 {
    width: 33.33% !important;
}

.w-66 {
    width: 66.66% !important;
}

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

    .md\:w-20 {
        width: 20% !important;
    }

    .md\:w-40 {
        width: 40% !important;
    }   

}


/*--------- Typography ---------*/

/* font-size */

/* h1 */

/* h2 */

/* h3 */

/* h4 */

/* h5 */

/* h6 */

/* text-base, text-md */

/* small text-sm */

small {
	
}

/* small > small text-xs */

/* small > small > small text-2xs */

/* font-weight */

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

/* line-height */

.leading-sm {
    line-height: 1.45 !important;
}

/* text-align */

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

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

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

/* color */

.text-blue,
.text-primary {
    color: var(--blue) !important;
}

.text-red,
.text-attention {
    color: var(--red) !important;
}

/* text-indent */

.indent-initial {
    text-indent: initial !important;
}

.indent-md {
    text-indent: 1em !important;
}

/* white-space */

.whitespace-nowrap {
    white-space: nowrap !important;
}

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

    .md\:whitespace-nowrap {
        white-space: nowrap !important;
    }

}

/*--------- Backgrounds ---------*/

.bg-white {
    background-color: white !important;
}

/*--------- Border ---------*/

.border-t-2 {
    border-top-width: 2px !important;
}

.border-b-2 {
    border-bottom-width: 2px !important;
}

.border-y-dashed {
    border-top-style: dashed !important;
    border-bottom-style: dashed !important;
    border-top-color: #ebebeb !important;
    border-bottom-color: #ebebeb !important;
}

.border-t-dashed {
    border-top-style: dashed !important;
    border-top-color: #ebebeb !important;
}

.border-b-dashed {
    border-bottom-style: dashed !important;
    border-bottom-color: #ebebeb !important;
}

/*--------- Border ---------*/

.all-unset {
    all: unset;
}

.relative {
    position: relative !important;
}

.absolute {
    position: absolute !important;
}

.right-0 {
    right: 0% !important;
}

.middle-50 {
    top: 50% !important;
    translate: 0 50% !important;
}

.top-50 {
    top: 50% !important;
}

.translate-x-50 {
    translate: 0 50% !important;
}