@charset "UTF-8";
/* ================================
   共通のカスタムCSSユーティリティ
   ================================ */

/* Flexbox */
.cus-flex { display: flex; }
.cus-flex-1 { flex: 1; }
.cus-inline-flex { display: inline-flex; }
.cus-flex-col { flex-direction: column; }
.cus-flex-row { flex-direction: row; }
.cus-justify-center { justify-content: center; }
.cus-justify-between { justify-content: space-between; }
.cus-items-center { align-items: center; }
.cus-items-start { align-items: flex-start; }
.cus-items-end { align-items: flex-end; }

/* Gap（間隔） */
.cus-gap-0 { gap: 0; }
.cus-gap-1 { gap: 0.25rem; }   /* 4px */
.cus-gap-2 { gap: 0.5rem; }    /* 8px */
.cus-gap-4 { gap: 1rem; }      /* 16px */
.cus-gap-6 { gap: 1.5rem; }    /* 24px */
.cus-gap-8 { gap: 2rem; }      /* 32px */

/* Text alignment */
.cus-text-center { text-align: center; }
.cus-text-left { text-align: left; }
.cus-text-right { text-align: right; }

/* Spacing (margin & padding) */
.cus-m-0 { margin: 0; }
.cus-mt-4 { margin-top: 1rem; }
.cus-mt-6 { margin-top: 1.5rem; }
.cus-mt-8 { margin-top: 2rem; }
.cus-mt-12 { margin-top: 4rem; }
.cus-my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.cus-mb-12 { margin-bottom: 4rem; }
.cus-p-0 { padding: 0; }
.cus-p-2 { padding: 0.5rem; }
.cus-p-4 { padding: 1rem; }
.cus-p-8 { padding: 2rem; }
.cus-px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.cus-py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.cus-py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.cus-py-12 { padding-top: 4rem; padding-bottom: 4rem; }
.cus-pt-2 { padding-top: 0.5rem; }
.cus-pb-12 { padding-bottom: 4rem; }

/* Margin - auto */
.cus-m-auto { margin: auto; }
.cus-mx-auto { margin-left: auto; margin-right: auto; }
.cus-my-auto { margin-top: auto; margin-bottom: auto; }
.cus-ml-auto { margin-left: auto; }
.cus-mr-auto { margin-right: auto; }
.cus-mt-auto { margin-top: auto; }
.cus-mb-auto { margin-bottom: auto; }


/* Width / Height */
.cus-w-full { width: 100%; !important;}
.cus-h-full { height: 100%; !important;}
.cus-max-w-screen-md { max-width: 768px; margin-left: auto; margin-right: auto; }

/* Typography - テキストサイズ */
.cus-text-xs { font-size: 0.75rem; }    /* 12px */
.cus-text-sm { font-size: 0.875rem; }   /* 14px */
.cus-text-base { font-size: 1rem; }     /* 16px */
.cus-text-lg { font-size: 1.125rem; }   /* 18px */
.cus-text-xl { font-size: 1.25rem; }    /* 20px */
.cus-text-2xl { font-size: 1.5rem; }    /* 24px */
.cus-text-3xl { font-size: 1.75rem; line-height: 2.25rem;}
.cus-font-bold { font-weight: bold; }
.cus-uppercase { text-transform: uppercase; }

/* Colors */
.cus-bg-gray { background-color: #e5e7eb; }
.cus-text-gray { color: #e6edf0; }
.cus-text-orange { color: #ff791a; }
.cus-bg-white { background-color: #ffffff; }
.cus-bg-orange { background-color: #ff791a; }
.cus-text-black { color: #000000; }
.cus-text-white { color: #ffffff; }

/* Border */
.cus-border { border: 1px solid #e5e7eb; }
.cus-rounded { border-radius: 0.25rem; }
.cus-rounded-lg { border-radius: 0.5rem; }

/* Display & Visibility */
.cus-hidden { display: none; }
.cus-block { display: block; }
.cus-inline-block { display: inline-block; }


.cus-relative { position: relative }
.cus-absolute { position: absolute }
.cus-top-0 { top: 0; }
.cus-right-0 { right: 0; }
.cus-bottom-0 { bottom: 0; }
.cus-left-0 { left: 0; }

@media screen and (min-width: 751px) {
	.pc\:cus-hidden { display: none; }
	.pc\:cus-w-full { width: 100%; !important;}
	.pc\:cus-p-0 { padding: 0; }
	.pc\:cus-mt-12 { margin-top: 4rem; }
}

@media screen and (max-width: 750px) {
	.sp\:cus-hidden { display: none; }
	.sp\:cus-flex { display: flex; }
	.sp\:cus-flex-col { flex-direction: column; }
	.sp\:cus-text-center { text-align: center; }
	.sp\:cus-text-xs { font-size: 0.75rem; }    /* 12px */
	.sp\:cus-text-sm { font-size: 0.875rem; }   /* 14px */
	.sp\:cus-text-base { font-size: 1rem; }     /* 16px */
	.sp\:cus-text-lg { font-size: 1.125rem; }   /* 18px */
	.sp\:cus-text-xl { font-size: 1.25rem; }    /* 20px */
	.sp\:cus-text-2xl { font-size: 1.5rem; }    /* 24px */
	.sp\:cus-max-w-90 { max-width: 90%; }
	.sp\:cus-mt-6 { margin-top: 1.5rem; }
	.sp\:cus-m-0 { margin: 0 !important; }
	.sp\:cus-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
}