html,
body {
    width: 100%;
    height: 100%;
}
.wrap {
    font-family: "Noto Sans JP", serif;
    font-feature-settings: "palt";
    font-weight: 400;
    color: var(--color-red);
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.wrap * {
    letter-spacing: 0.12em;
}
.main {
    overflow: hidden;
}
.txt_center {
    text-align: center;
}
.txt_right {
    text-align: right;
}
.txt_left {
    text-align: left;
}
@media (min-width: 768px) {
    [data-disp-only]:not([data-disp-only~='pc']) {
        display: none !important;
    }
    .txt_right_pc {
        text-align: right;
    }
    .wrap {
        margin-top: 92em;
    }
}
@media (max-width: 767px) {
    [data-disp-only]:not([data-disp-only~='sp']) {
        display: none !important;
    }
    .letter_spacing_none_sp {
        letter-spacing: 0 !important;
    }
    .txt_right_sp {
        text-align: right;
    }
    .wrap {
        margin-top: 80em;
    }
}

/* font */
.fw400 {
    font-weight: 400 !important;
}
.fw500 {
    font-weight: 500 !important;
}
.fw700 {
    font-weight: 700 !important;
}
.fw800 {
    font-weight: 800 !important;
}
.fw900 {
    font-weight: 900 !important;
}
.oswald {
    font-family: "Oswald", sans-serif;
    font-weight: 700;
}
@media screen and (min-width: 1121px) {
	.wrap {
		font-size: 1px;
        --relative-size: calc(100 / 1440 * 1vw);
	}
}
@media screen and (max-width: 1120px) and (min-width: 768px) {
	.wrap {
		font-size: calc(100 / 1120 * 1vw);
        --relative-size: calc(100 / 1439 * 1vw);
	}
}
@media screen and (max-width: 767px) {
	.wrap {
        font-size: calc(100 / 390 * 1vw);
	}
}

/* img */
picture {
    display: inline-block;
    line-height: 0;
    vertical-align: bottom;
    max-width: 100%;
}
img,
svg {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* color */
:root {
    --color-white: #fff;
    --color-black: #000;
    --color-light-black: #333333;
    --color-gray: #f3f1f1;
    --color-red: #e3363f;
    --color-yellow: #fced0b;
    --color-blue: #00b0d6;
    --color-light-blue: #e8f8fb;
    --color-purple: #c469aa;
    --color-light-purple: #f8ebf4;
    --color-green: #6cb35c;
    --color-light-green: #ebf8e7;
    --color-pink: #f182a9;
    --color-light-pink: #fbf1f5;
}
.color_blue {
    color: var(--color-blue);
}
.color_purple {
    color: var(--color-purple);
}
.color_green {
    color: var(--color-green);
}
.color_pink {
    color: var(--color-pink);
}
.color_white {
    color: var(--color-white);
}
.bg_blue {
    background-color: var(--color-blue);
}
.bg_purple {
    background-color: var(--color-purple);
}
.bg_green {
    background-color: var(--color-green);
}
.bg_pink {
    background-color: var(--color-pink);
}
.bg_white {
    background-color: var(--color-white);
}
.bg_gray {
    background-color: var(--color-gray);
}

/* common animation */
.animation_ready .fade_up {
    opacity: 0;
    transform: translateY(30%);
    transition: opacity 0.6s, transform 0.6s;
}
.animation_ready.animation_loaded .fade_up.is_animated {
    opacity: 1;
    transform: translateY(0);
}
.mv.loaded .fade_up {
    opacity: 1;
    transform: translateY(0);
}
.animation_ready .fade_left {
    opacity: 0;
    transform: translateX(-30%);
    transition: opacity 0.6s, transform 0.6s;
}
.animation_ready.animation_loaded .fade_left.is_animated {
    opacity: 1;
    transform: translateX(0);
}
.mv.loaded .fade_left {
    opacity: 1;
    transform: translateX(0);
}
.animation_ready .fade_right {
    opacity: 0;
    transform: translateX(30%);
    transition: opacity 0.6s, transform 0.6s;
}
.animation_ready.animation_loaded .fade_right.is_animated {
    opacity: 1;
    transform: translateX(0);
}
.mv.loaded .fade_right {
    opacity: 1;
    transform: translateX(0);
}
.animation_ready .popup {
    transform: scale(0.8);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
}
.animation_ready.animation_loaded .popup.is_animated {
    opacity: 1;
    transform: scale(1.0);
}
.mv.loaded .popup {
    opacity: 1;
    transform: scale(1.0);
}
.animation_ready .ttl_up {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.animation_ready .ttl_up_inner {
    display: block;
    transform: translateY(135%);
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner {
    animation: ttl_up 0.5s forwards;
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(2) {
    animation-delay: 0.1s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(3) {
    animation-delay: 0.2s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(4) {
    animation-delay: 0.3s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(5) {
    animation-delay: 0.4s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(6) {
    animation-delay: 0.5s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(7) {
    animation-delay: 0.6s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(8) {
    animation-delay: 0.7s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(9) {
    animation-delay: 0.8s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(10) {
    animation-delay: 0.9s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(11) {
    animation-delay: 1s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(12) {
    animation-delay: 1.1s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(13) {
    animation-delay: 1.2s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(14) {
    animation-delay: 1.3s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(15) {
    animation-delay: 1.4s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(16) {
    animation-delay: 1.5s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(17) {
    animation-delay: 1.6s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(18) {
    animation-delay: 1.7s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(19) {
    animation-delay: 1.8s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(20) {
    animation-delay: 1.9s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(21) {
    animation-delay: 2s
}
.animation_ready.animation_loaded .ttl_up.is_animated .ttl_up_inner:nth-child(22) {
    animation-delay: 2.1s
}
@keyframes ttl_up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0);
    }
}
.animation_ready .ttl_curve_up > span {
    display: block;
    translate: 100%;
    opacity: 0;
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span {
    animation: ttl_curve_up 1s forwards;
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(2) {
    animation-delay: 0.05s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(3) {
    animation-delay: 0.1s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(4) {
    animation-delay: 0.15s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(5) {
    animation-delay: 0.2s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(6) {
    animation-delay: 0.25s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(7) {
    animation-delay: 0.3s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(8) {
    animation-delay: 0.35s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(9) {
    animation-delay: 0.4s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(10) {
    animation-delay: 0.45s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(11) {
    animation-delay: 0.5s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(12) {
    animation-delay: 0.55s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(13) {
    animation-delay: 0.6s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(14) {
    animation-delay: 0.65s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(15) {
    animation-delay: 0.7s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(16) {
    animation-delay: 0.75s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(17) {
    animation-delay: 0.8s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(18) {
    animation-delay: 0.85s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(19) {
    animation-delay: 0.9s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(20) {
    animation-delay: 0.95s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(21) {
    animation-delay: 1s
}
.animation_ready.animation_loaded .ttl_curve_up.is_animated > span:nth-child(22) {
    animation-delay: 1.05s
}
@keyframes ttl_curve_up {
    0% {
        translate: 0 100%;
        opacity: 0;
    }

    100% {
        translate: 0 0;
        opacity: 1;
    }
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotation_cross {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg);
        opacity: 1;
    }
}
.animation_ready .rotate_expand {
    opacity: 0;
    display: block;
}
.animation_ready.animation_loaded .rotate_expand.is_animated {
    animation: rotate_expand 1s ease-out forwards;
}
@keyframes rotate_expand {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        translate: inherit;
        rotate: 0deg;
    }
}
@media (min-width: 768px) {
    @media (hover:hover) {
        a {
            transition: opacity 0.6s;
        }
        a:hover {
            opacity: 0.7;
        }
    }
}

/* part */
.btn_wrap {
    margin-inline: auto;
    text-align: center;
}
.btn {
    display: inline-block;
    position: relative;
    z-index: 1;
    text-decoration: none;
}
.btn::before {
    content: '';
    position: absolute;
    z-index: -1;
}
.btn_inner {
    display: block;
    text-align: center;
    color: var(--color-white);
    background-color: var(--color-red);
}
.btn_border {
    border: solid 2px var(--color-white);
}
.btn_inner_info {
    display: block;
}
.btn_inner_info_img {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn_blank::after {
    content: url(../images/icon_blank_white.svg);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.btn_blank_red::after {
    content: url(../images/icon_blank_red.svg);
}
/* バリエーション */
.btn_red::before {
    background-color: var(--color-red);
}
.btn_blue:before {
    background-color: var(--color-blue);
}
.btn_purple:before {
    background-color: var(--color-purple);
}
.btn_green:before {
    background-color: var(--color-green);
}
.btn_bg_white:before {
    background-color: var(--color-white);
}
.btn_white .btn_inner {
    background-color: var(--color-white);
    color: var(--color-red);
}
.btn_white .btn_border {
    border: solid 2px var(--color-red);
}
.btn_white:before {
    background-color: var(--color-red);
}
@media (min-width: 768px) {
    .container {
        max-width: 1120em;
        margin-inline: auto;
    }
    .btn {
        border-radius: 28em;
    }
    .btn_inner {
        width: 256em;
        border-radius: 28em;
        padding-block: 18em;
    }
    .btn::before {
        width: 256em;
        height: 56em;
        border-radius: 28em;
        right: -6em;
        bottom: -8em;
    }
    .btn_inner_info {
        margin-top: 5em;
    }
    .btn_inner_txt_size {
        font-size: 16em;
    }
    .btn_inner_info_txt_size {
        font-size: 14em;
    }
    .btn_inner_info_img {
        column-gap: 8em;
    }
    .btn_blank::after {
        right: 27em;
    }
    .btn_blank_red::after {
        right: 34em;
    }
    /* バリエーション */
    .btn_lg .btn_inner{
        width: 456em;
        border-radius: 48em;
        padding-block: 23em;
        line-height: calc(28 / 20);
    }
    .btn_lg .btn_inner_txt_size {
        font-size: 20em;
    }
    .btn_lg::before {
        width: 456em;
        border-radius: 48em;
        height: 96em;
        right: -7em;
        bottom: -11em;
    }
    .btn_lg .btn_blank::after {
        scale: 1.4;
    }
    .btn_lg .btn_blank_red::after {
        scale: 1;
    }
    .btn_white .btn_inner {
        padding-block: 13em;
    }
    .btn_makaroni_img {
        width: 82em;
    }
    @media (hover:hover) {
        .btn {
            transition: opacity 0.6s;
        }
        .btn:hover {
            opacity: 0.7;
        }
    }
}
@media (max-width: 767px) {
    .container {
        padding-inline: 24em;
    }
    .btn {
        border-radius: 28em;
    }
    .btn_inner {
        width: 240em;
        border-radius: 24em;
        padding-block: 14em
    }
    .btn::before {
        width: 240em;
        height: 48em;
        border-radius: 24em;
        right: -5em;
        bottom: -7em;
    }
    .btn_border {
        border: solid 2em var(--color-white);
    }
    .btn_inner_info {
        margin-top: 5em;
    }
    .btn_inner_txt_size {
        font-size: 13em;
    }
    .btn_inner_info_txt_size {
        font-size: 10em;
    }
    .btn_inner_info_img {
        column-gap: 8em;
    }
    .btn_blank::after {
        right: 20em;
    }
    /* バリエーション */
    .btn_lg .btn_inner{
        width: 302em;
        border-radius: 32em;
        padding-block: 14em;
        line-height: calc(36 / 26);
    }
    .btn_lg::before {
        width: 302em;
        border-radius: 32em;
        height: 65em;
        right: -4em;
        bottom: -8em;
    }
    .btn_lg .btn_blank_red::after {
        scale: 0.8;
    }
    .btn_white .btn_inner {
        padding-block: 10em;
    }
    .btn_makaroni_img {
        width: 49em;
    }
}
@media screen and (max-width: 1120px) and (min-width: 768px) {
    .container {
        padding-inline: 40em;
    }
}

/* footer */
.footer {
    color: var(--color-light-black);
    text-align: center;
}
.footer_txt_copy {
    display: block;
}
@media (min-width: 768px) {
    .footer {
        padding-block: 80em;
    }
    .footer_txt_copy {
        margin-top: 10em;
    }
    .footer_txt_size,
    .footer_txt_copy_txt_size {
        font-size: 16em;
        letter-spacing: 0.04em;
    }
}
@media (max-width: 767px) {
    .footer {
        padding-block: 40em;
        line-height: calc(30 / 20);
    }
    .footer_txt_copy {
        margin-top: 15em;
    }
    .footer_txt_size,
    .footer_txt_copy_txt_size {
        font-size: 10em;
        letter-spacing: 0;
    }
}

/* side_bnr */
.side_bnr {
    filter: drop-shadow(-13.7px 19.7px 40px rgba(0, 0, 0, 0.08));
}
@media (min-width: 768px) {
    .side_bnr {
        position: fixed;
        right: 0;
        bottom: 100em;
        z-index: 10;
    }
    .side_bnr_img {
        width: 234em;
    }
}
@media (max-width: 767px) {
    .side_bnr {
        margin-top: 32em;
        text-align: center;
        will-change: filter;
    }
    .side_bnr_img {
        width: 280em;
    }
    /* animation */
    .animation_ready .side_bnr_img{
        transform: scale(0.8);
        opacity: 0;
        transition: opacity 0.3s, transform 0.3s;
    }
    .animation_ready.animation_loaded .side_bnr_img.is_animated {
        opacity: 1;
        transform: scale(1.0);
    }
}

/* totop */
.totop {
    text-align: center;
    position: relative;
    z-index: 1;
}
.totop_txt {
    display: block;
    color: var(--color-red);
}
@media (min-width: 768px) {
    .totop {
        margin-top: 120em;
    }
    .totop_img {
        width: 53em;
    }
    .totop_txt {
        margin-top: 25em;
    }
    .totop_txt_size {
        font-size: 18em;
    }
}
@media (max-width: 767px) {
    .totop {
        margin-top: 40em;
    }
    .totop_img {
        width: 33em;
    }
    .totop_txt {
        margin-top: 17em;
    }
    .totop_txt_size {
        font-size: 13em;
    }
}