@charset "UTF-8";
/* =========================================================
u-helper style
========================================================= */
/* log in or out
--------------------------------------------------------- */

/* display
--------------------------------------------------------- */
.u-d {
    display: block;
}

.u-dNone {
    display: none;
}

.u-d-lg {
    display: none;
}
@media (max-width: 1280px) {
	.u-d-lg {
		display: block;
	}
}

.u-d-tab {
    display: none;
}
@media (max-width: 1024px) {
	.u-d-tab {
		display: block;
	}
}

.u-d-md {
    display: none;
}
@media (max-width: 768px) {
	.u-d-md {
		display: block;
	}
}

.u-d-sm {
    display: none;
}
@media (max-width: 640px) {
	.u-d-sm {
		display: block;
	}
}

.u-dNone {
    display: none;
}

.u-dNone-tab {
    display: block;
}
@media (max-width: 1024px) {
	.u-dNone-tab {
		display: none;
	}
}

.u-dNone-md {
    display: block;
}
@media (max-width: 768px) {
	.u-dNone-md {
		display: none;
	}
}

.u-dNone-sm {
    display: block;
}
@media (max-width: 640px) {
	.u-dNone-sm {
		display: none;
	}
}

.u-dNone-tiny {
    display: block;
}
@media (max-width: 480px) {
	.u-dNone-tiny {
		display: none;
	}
}

/* img
--------------------------------------------------------- */
.u-objectfit-cover {
    object-fit: cover;
}

/* color
--------------------------------------------------------- */
.u-color-main {
    color: var(--accent-color02);
}
.u-color-white {
    color: white;
}
.u-color-red01 {
    color: var(--red01);
}
.u-color-green {
    color: var(--accent-color03);
}
.u-color-yellow {
    color: var(--accent-color06);
}
.u-color-blue01 {
    color: var(--accent-color01);
}
.u-color-blue02 {
    color: var(--accent-color08);
}

/* list
--------------------------------------------------------- */
.u-list-style-none li {
    list-style: none;
}
.u-listBefore--none li:before {
    content: none!important;
}

/* border
--------------------------------------------------------- */
.u-border-top {
    border-top: 1px solid var(--sub-color01);
}
.u-border-bottom {
    border-bottom: 1px solid var(--sub-color01);
}


/* border - radius
--------------------------------------------------------- */
.u-border-radius4 {
    border-radius: 4px;
    overflow: hidden;
}
.u-border-radius50 {
    border-radius: 100px;
    overflow: hidden;
}
.u-border-radius2-4 {
    border-radius: 4px 4px 0 0;
}

/* text / font
--------------------------------------------------------- */
.u-tc-white {
    color: #fff;
}
.u-fw-bold {
    font-weight: 900;
}
.u-ta-center {
    text-align: center;
}

.u-ta-center {
    text-align: center;
}
.u-ta-left {
    text-align: left;
}
.u-ta-right {
    text-align: right; 
}

/* font-size utilities
--------------------------------------------------------- */
.u-fs-tiny {
    font-size: var(--fs-tiny);
}
.u-fs-min {
    font-size: var(--fs-min);
}
.u-fs-mid {
    font-size: var(--fs-mid);
}
.u-fs-p {
    font-size: var(--fs-p);
}
.u-fs-postp {
    font-size: var(--fs-postp);
}
.u-fs-subtitle {
    font-size: var(--fs-subtitle);
}
.u-fs-title {
    font-size: var(--fs-title);
}
.u-fs-large {
    font-size: var(--fs-large);
}
.u-fs-xlarge {
    font-size: var(--fs-xlarge);
}
.u-fs-big {
    font-size: var(--fs-big);
}
.u-fs-huge {
    font-size: var(--fs-huge);
}
.u-fs-xhuge {
    font-size: var(--fs-xhuge);
}

/* link + hover
--------------------------------------------------------- */
.u-link-hoverwhite:hover {
    color: #fff;
}
.u-link-nohover:hover {
    color: #000;
}

/* padding +
--------------------------------------------------------- */
.u-pb-1 {
    padding-bottom: 1rem!important;
}
.u-pb-2 {
    padding-bottom: 2rem!important;
}
.u-pb-3 {
    padding-bottom: 3rem!important;
}
.u-pb-6 {
    padding-bottom: 6rem!important;
}

.u-ptb-8 {
    padding-top: 8rem!important;
    padding-bottom: 8rem!important;
}

.u-pb-10 {
    padding-bottom: 10rem!important;
}
.u-ptb-10 {
    padding-top: 10rem!important;
    padding-bottom: 10rem!important;
}
.u-pt-0 {
    padding-top: 0px!important;
}
.u-pt-1 {
    padding-top: 1rem;
}
.u-pt-2 {
    padding-top: 2rem;
}
.u-pt-3 {
    padding-top: 3rem;
}
/* margin +
--------------------------------------------------------- */
.u-mb-0 {
    margin-bottom: 0!important;
}
.u-mb-1 {
    margin-bottom: 1rem!important;
}
.u-mb-2 {
    margin-bottom: 2rem!important;
}
.u-mb-3 {
    margin-bottom: 3rem!important;
}
.u-mb-6 {
    margin-bottom: 6rem!important;
}

.u-mt-0 {
    margin-top: 0!important;
}
.u-mt-1 {
    margin-top: 1rem;
}
.u-mt-3 {
    margin-top: 3rem;
}
.u-mt-6 {
    margin-top: 6rem;
}
.u-mr-1 {
    margin-right: 1rem;
}
.u-mr-3 {
    margin-right: 3rem;
}


/* margin -
--------------------------------------------------------- */
.u-mx-n32 {
    margin-left: -32px;
    margin-right: -32px;
}
.u-mx-n16 {
    margin-left: -16px;
    margin-right: -16px;
}
.u-mt-n40 {
    margin-top: -40px;
}

.u-mrl-auto {
    margin-left: auto;
    margin-right: auto;
}

/* width
--------------------------------------------------------- */
.u-w100 {
    width: 100%;
}

/* max-width
--------------------------------------------------------- */
.u-maxw-480 {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.u-maxw-800 {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.u-maxw-post {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

/* max-height
--------------------------------------------------------- */
.u-maxh-420 {
    max-height: 420px;
}

/* whitespace
--------------------------------------------------------- */
.u-whitespace {
    width: 100%; /* 要素の横幅を指定 */
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* ハミ出した部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari */
    -o-text-overflow: ellipsis; /* Opera */
}


/* scroll - mv
--------------------------------------------------------- */
.u-of-scroll {
    overflow-y: scroll
}
.u-of-hidden {
    overflow: hidden;
}

/* underline
--------------------------------------------------------- */
.u-underline01 {
    /* position: relative;
    &:before {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 4px;
        border-radius: 100px;
    } */
    &.__yellow {
        border-bottom: 2px solid var(--accent-color04);
    } 
}

/* sns bg color
--------------------------------------------------------- */
.u-youtubeFrame {
    width: 100%;
    position: relative;
    padding-top: 56.25%;
    iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
  
/* position
--------------------------------------------------------- */
.u-position-r {
    position: relative;
}