/*! ©SEGA */
@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-car-detail {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    font-feature-settings: 'palt'
}

@media screen and (min-width: 601px) {
    .inidac-car-detail {
        padding: 1rem auto 0.5rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-car-detail {
        padding: 1rem 0 0.5rem
    }
}

.inidac-car-detail--isNew {
    font-size: 6rem
}

.inidac-car-detail--maker {
    font-size: 2rem;
    font-weight: 100;
    line-height: 1;
    letter-spacing: 0.125ex
}

.inidac-car-detail--favorite {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 3rem
}

.inidac-car-detail .inidac-contentbox--outer {
    overflow: inherit
}

.inidac-car-detail--name {
    display: flex;
    align-items: center
}

@media screen and (min-width: 601px) {
    .inidac-car-detail--name {
        padding: 0.5rem 0;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1
    }
}

@media screen and (max-width: 600px) {
    .inidac-car-detail--name {
        min-height: 3rem;
        padding: 0.25rem 0;
        font-size: 1.25rem;
        font-weight: 700;
        line-height: 1
    }
}

.inidac-car-detail--typeIcon {
    font-size: 2rem;
    transform: skew(10deg)
}

.inidac-car-detail--mainImage {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: center center / contain no-repeat #fff;
    border: thin solid #666
}

.inidac-car-detail--colorList {
    display: flex;
    flex-wrap: wrap;
    margin: 0.5rem 0 0
}

.inidac-car-detail--color {
    position: relative;
    width: 1em;
    height: 0.7em;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
    background-color: red;
    font-size: 3rem
}

.inidac-car-detail--color {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    border: 0.125rem solid #111
}

.inidac-car-detail--color:hover {
    box-shadow: 0.5rem 0.75rem 0 0 #111;
    transform: translateY(-.25rem);
    filter: brightness(110%) contrast(102%);
    cursor: pointer
}

.inidac-car-detail--color:active {
    box-shadow: 0.5rem 0.625rem 0 0 #111;
    transform: translateY(-.125rem);
    filter: brightness(95%) contrast(102%);
    cursor: pointer
}

.inidac-car-detail--color.active {
    outline: 2px solid #fa2
}

.inidac-car-detail--colorName {
    text-shadow: 0 -1px 1px #fff, 0 -1px 1px #fff, 0 -1px 1px #fff, -1px 1px 1px #fff, -1px 1px 1px #fff, 0px 1px 1px #fff, 1px 1px 1px #fff, 1px 1px 1px #fff;
    margin: 0.5rem 0.25rem 0.25rem;
    color: #111;
    font-size: 0.9rem;
    font-weight: bold;
    transform: skew(-10deg)
}

.inidac-car-detail--tuningStyleSection>h1 {
    display: inline-block;
    padding: 0.25rem 1rem;
    background-color: #111;
    color: #f2f2f2
}

.inidac-car-detail--tuningList {
    display: flex;
    margin: 0 -0.5rem
}

.inidac-car-detail--tuningItem {
    flex: 33.33333% 0;
    margin: 0.5rem 0.5rem;
    padding: 0.5rem;
    border: thin solid #666;
    background-color: #fff
}

.inidac-car-detail--tuningImage {
    width: 100%;
    height: 0;
    padding-bottom: 50%;
    background: center center / contain no-repeat #fff
}

.inidac-car-detail--tuningIcon {
    margin: 0.5rem 0;
    font-size: 1.5rem
}

.inidac-car-detail--comment {
    margin-top: 1rem;
    color: #222;
    font-size: 0.75rem;
    text-align: right
}

.tuning-style {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.tuning-style-new {
    position: absolute;
    top: -2.0rem;
    left: -1.5rem;
    font-size: 4rem;
    z-index: 2
}

.tuning-style-default_status {
    position: absolute;
    top: -4rem;
    right: -1.5rem;
    font-size: 8rem;
    z-index: 2
}

.tuning-style-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: center center / cover no-repeat
}

@media screen and (max-width: 600px) {
    .tuningstyleAll.d-flex-center {
        flex-wrap: wrap
    }
}

.tuning-style-text {
    position: absolute;
    bottom: 0;
    padding: 0.5rem 0.5rem 1.25rem;
    line-height: 1.1
}

.tuning-style-maker {
    margin-top: 0.5rem;
    color: #333;
    font-size: 0.8rem;
    font-style: italic;
    text-shadow: 0 -1px 1px #fff,
        0 -1px 1px #fff,
        0 -1px 1px #fff,
        -1px 1px 1px #fff,
        -1px 1px 1px #fff,
        0px 1px 1px #fff,
        1px 1px 1px #fff,
        1px 1px 1px #fff
}

.tuning-style-name {
    color: #222;
    font-size: 1rem;
    font-weight: bold;
    font-style: italic;
    text-shadow: 0 -1px 1px #fff,
        0 -1px 1px #fff,
        0 -1px 1px #fff,
        -1px 1px 1px #fff,
        -1px 1px 1px #fff,
        0px 1px 1px #fff,
        1px 1px 1px #fff,
        1px 1px 1px #fff
}

.tuning-style-icons {
    display: flex;
    font-size: 2rem
}

.tuning-style-icons>* {
    margin-right: 0.25rem
}

@media screen and (min-width: 601px) {
    .infobox {
        margin-left: 0.5rem
    }
}

@media screen and (max-width: 600px) {
    .infobox {
        margin-top: 1rem
    }
}

.infobox.isDetail {
    margin-left: 0
}

._w_90 {
    width: 90%
}

.civic_cautionText {
    margin: 20px auto 10px
}

@media screen and (min-width: 601px) {
    .civic_cautionText {
        text-align: center
    }
}

.release_versionBox {
    margin-bottom: 20px
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-car-item {
    position: relative;
    background-color: #eff7fa
}

@media screen and (min-width: 601px) {
    .inidac-car-item {
        height: 0;
        padding-bottom: 75%
    }
}

@media screen and (max-width: 600px) {
    .inidac-car-item {
        height: 100%
    }
}

@media screen and (min-width: 601px) {
    .inidac-car-item--imageField {
        position: absolute;
        width: 100%;
        height: 100%
    }
}

@media screen and (max-width: 600px) {
    .inidac-car-item--imageField {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 75%
    }
}

.inidac-car-item--new {
    position: absolute;
    top: -2.0rem;
    left: -1.5rem;
    font-size: 4rem
}

.inidac-car-item--carImage {
    position: absolute;
    width: 100%;
    height: 100%;
    background: center center/cover no-repeat
}

.inidac-car-item--type {
    display: flex;
    font-size: 2rem
}

@media screen and (min-width: 601px) {
    .inidac-car-item--type {
        margin-bottom: 0.25rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-car-item--type {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%
    }
}

.inidac-car-item--type>.inidac-icon {
    margin-right: 0.5rem
}

@media screen and (min-width: 601px) {
    .inidac-car-item--favorite {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem
    }
}

.inidac-car-item--texts {
    padding: 0 0.5rem 0.5rem;
    font-style: italic;
    font-feature-settings: 'palt';
    line-height: 1.25
}

@media screen and (min-width: 601px) {
    .inidac-car-item--texts {
        position: absolute;
        bottom: 0
    }
}

@media screen and (max-width: 600px) {
    .inidac-car-item--texts {
        position: relative;
        margin-top: -1rem
    }
}

.inidac-car-item--maker {
    margin-top: 3px;
    color: #333;
    font-size: 0.8rem;
    text-shadow: 0 -1px 1px #fff,
        0 -1px 1px #fff,
        0 -1px 1px #fff,
        -1px 1px 1px #fff,
        -1px 1px 1px #fff,
        0px 1px 1px #fff,
        1px 1px 1px #fff,
        1px 1px 1px #fff
}

.inidac-car-item--name {
    color: #222;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0 -1px 1px #fff,
        0 -1px 1px #fff,
        0 -1px 1px #fff,
        -1px 1px 1px #fff,
        -1px 1px 1px #fff,
        0px 1px 1px #fff,
        1px 1px 1px #fff,
        1px 1px 1px #fff
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-car-item2 {
    position: relative;
    height: 100%
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-contentbox {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: relative;
    z-index: 0;
    border: 0.25rem solid #111
}

.inidac-contentbox.normalshadow {
    box-shadow: 0.5rem 0.5rem 0 0 #111
}

.inidac-contentbox.skew {
    transform: skewX(-20deg)
}

@media screen and (max-width: 600px) {
    .inidac-contentbox.small_if_sp {
        width: 90%;
        margin: 0 auto
    }
}

.inidac-contentbox.left,
.inidac-contentbox.right {
    flex: 0 0 calc(50% - 1.75rem)
}

.inidac-contentbox.right {
    margin-left: 3.5rem
}

.inidac-contentbox.left.title {
    box-shadow: 0.5rem 0.5rem 0 0 #111
}

.inidac-contentbox.left.title::before {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    content: '';
    position: absolute;
    top: -0.25rem;
    left: calc(100% - 0.1rem);
    z-index: 0;
    width: 3rem;
    height: calc(2rem + 4rem + 0.25rem * 2);
    border-top: 2.25rem solid #111;
    border-right: 0.25rem solid #111;
    border-bottom: 0.25rem solid #111;
    background-color: #f2f2f2;
    transform: skew(-20deg);
    transform-origin: 0 0
}

.inidac-contentbox.right.title {
    box-shadow: 0.5rem 0.5rem 0 0 #111
}

.inidac-contentbox.right.title::before {
    content: '';
    position: absolute;
    top: -0.25rem;
    right: calc(100% - 0.35rem);
    z-index: 1;
    width: 3rem;
    height: calc(2rem + 4rem + 0.25rem * 2);
    border-top: 2.25rem solid #111;
    border-bottom: 0.25rem solid #111;
    border-left: 0.25rem solid #111;
    background-color: #f2f2f2;
    transform: skew(-20deg);
    transform-origin: 0 100%
}

.inidac-contentbox.right.title::after {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    content: '';
    position: absolute;
    top: -0.25rem;
    right: 100%;
    z-index: 0;
    width: 3rem;
    height: calc(2rem + 4rem + 0.25rem * 2);
    transform: skew(-20deg);
    transform-origin: 0 100%
}

.inidac-contentbox--new {
    position: absolute;
    top: -2.5rem;
    left: -3rem;
    z-index: 10;
    font-size: 5rem
}

.inidac-contentbox--title {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 2rem;
    background-color: #111;
    color: #f2f2f2;
    font-size: 90%;
    white-space: nowrap
}

.inidac-contentbox--title.center {
    justify-content: center
}

.inidac-contentbox--title-text {
    display: block
}

.inidac-contentbox.left .inidac-contentbox--outer,
.inidac-contentbox.right .inidac-contentbox--outer {
    height: 4rem
}

.inidac-contentbox--outer {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    overflow: hidden
}

.inidac-contentbox--outer.fixedHeight {
    height: 4.5rem
}

.inidac-contentbox--inner {
    background-color: #f2f2f2;
    color: #111;
    font-weight: bold;
    font-feature-settings: 'palt'
}

.inidac-contentbox--title-text:not(.skew) {
    font-weight: bold;
    transform: skewX(-10deg)
}

.inidac-contentbox--title-text.left {
    position: absolute;
    display: block;
    width: calc(100% + 1.5rem);
    margin-right: -1.5rem
}

.inidac-contentbox--title-text.right {
    position: absolute;
    display: block;
    width: calc(100% + 0.5rem);
    margin-left: -0.5rem
}

.inidac-contentbox--title-text.skew {
    padding-left: 2rem;
    transform: skewX(10deg)
}

.inidac-contentbox--inner:not(.skew) {
    padding: 0.5rem 0.5rem
}

.inidac-contentbox--inner.left {
    width: calc(100% + .3rem);
    margin-right: -.3rem
}

.inidac-contentbox--inner.right {
    width: calc(100% + .8rem);
    margin-left: -.8rem
}

.inidac-contentbox--inner.skew {
    padding: 0.5rem 2rem
}

.inidac-contentbox--inner-text.skew {
    transform: skewX(10deg)
}

.inidac-contentbox--inner-text .course_text {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: relative;
    padding: 10px 10px 0px;
    font-weight: bold
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-course-detail {
    position: relative;
    max-width: 1000px;
    margin: 0 auto
}

.inidac-course-detail--imagewrap {
    padding: 0.25rem 1rem
}

.inidac-course-detail--image {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 0 0.5rem 0.75rem #fff, 0 0 1rem 0.75rem #fff
}

@media screen and (min-width: 601px) {
    .infobox {
        margin-left: 1rem
    }
}

@media screen and (max-width: 600px) {
    .infobox {
        margin-top: 1rem
    }
}

.inidac-course-header {
    position: relative
}

.inidac-course-header--content {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ccc;
    transform: skewX(-20deg)
}

@media screen and (max-width: 600px) {
    .inidac-course-header--content {
        width: 90%;
        margin: 0 auto
    }
}

.inidac-course-header--new {
    position: absolute;
    top: -3rem;
    left: -2.5rem;
    font-size: 6rem
}

.inidac-course-header--top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
    padding: 0 1rem 0 1.5rem;
    background: center 80% / cover no-repeat
}

.inidac-course-header--name {
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111;
    flex: 1;
    color: #f2f2f2;
    font-size: 1.5rem;
    font-weight: bold
}

.inidac-course-header--length {
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111;
    padding-left: 2rem;
    color: #f2f2f2;
    font-weight: bold
}

@media screen and (min-width: 601px) {
    .inidac-course-header--length {
        flex: 12rem 0;
        font-size: 1rem
    }

    .inidac-course-header--length>b {
        font-size: 2rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-course-header--length {
        flex: 8.5rem 0;
        font-size: 0.75rem
    }

    .inidac-course-header--length>b {
        font-size: 1rem
    }
}

.inidac-course-header--type {
    transform: skewX(20deg);
    font-size: 2rem
}

.inidac-course-header--sections {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 0;
    background-color: #f8f8f8;
    color: #111
}

@media screen and (min-width: 601px) {
    .inidac-course-header--sections {
        height: 3rem;
        padding-left: 2rem;
        font-size: 1.1rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-course-header--sections {
        height: 2.8rem;
        font-size: 0.85rem
    }
}

.inidac-course-header--sections b {
    margin-right: 0.5ex;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: bold
}

@media screen and (max-width: 600px) {
    .inidac-course-header--sections b {
        font-size: 1.2rem
    }
}

@media screen and (min-width: 601px) {
    .inidac-course-header--section:not(:last-child)::after {
        content: '|';
        display: inline-block;
        margin: 0 1rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-course-header--section {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 0;
        flex-direction: column;
        height: 100%;
        border-right: 1px solid #111;
        font-size: 0.9rem;
        line-height: 1.1
    }
}

@media screen and (max-width: 600px) {
    .inidac-course-header--section>span {
        display: block;
        font-size: 0.8rem
    }
}

._photo-large {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    border: 0.125rem solid #111;
    background: #000 center center / auto 133% no-repeat;
    overflow: hidden
}

._photo-large[data-index='0'] {
    background-color: #fff;
    background-size: contain
}

._photo-thumbnail {
    position: relative;
    width: 100%
}

._photo-thumbnail ._photo-image {
    background-size: auto 134%
}

._photo-thumbnail:nth-child(1) ._photo-image {
    background-size: auto 90%
}

._photo-image {
    z-index: 1;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
    background: #fff center center / cover no-repeat;
    cursor: pointer
}

._photo-image {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    border: 0.125rem solid #111
}

._photo-image:hover {
    box-shadow: 0.5rem 0.75rem 0 0 #111;
    transform: translateY(-.25rem);
    filter: brightness(110%) contrast(102%);
    cursor: pointer
}

._photo-image:active {
    box-shadow: 0.5rem 0.625rem 0 0 #111;
    transform: translateY(-.125rem);
    filter: brightness(95%) contrast(102%);
    cursor: pointer
}

.course-icon {
    margin: 0 0.25rem;
    font-size: 1.5rem;
    vertical-align: bottom
}

.route-list-item {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: calc(75% + .5rem);
    border: 2px solid #111;
    background: 50% top/auto calc(100% - 1.5rem - .5rem) no-repeat;
    background-color: #fff;
    color: #111
}

@media screen and (max-width: 600px) {
    .route-list-item {
        width: 90%;
        margin: 0 auto
    }
}

.route-list-item--name {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: absolute;
    bottom: 1rem;
    width: 100%;
    font-weight: bold;
    font-style: italic;
    text-align: center
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-course-item {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.inidac-course-item--content {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: center top/auto calc(100% - 1.5rem) no-repeat;
    background-color: #fff
}

.inidac-course-item--new {
    position: absolute;
    top: -2.5rem;
    left: -1.5rem;
    z-index: 1;
    font-size: 5rem
}

.inidac-course-item--image {
    position: absolute;
    width: 100%;
    height: 100%
}

.inidac-course-item--name {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: absolute;
    bottom: 0.5rem;
    width: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    color: #111;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px)
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

:root {
    --attend-color: #caf400;
    --attend-sub: #111;
    --attend-color-forimage: hue-rotate(74deg) brightness(3)
}

span.attend {
    color: var(--attend-color);
    text-shadow: 1px 1px 0 var(--attend-sub), -1px 1px 0 var(--attend-sub), 1px -1px 0 var(--attend-sub), -1px -1px 0 var(--attend-sub)
}

@media screen and (min-width: 601px) {
    .inidac-document {
        min-width: 1000px;
        /* padding-top: 4rem; */
    }
}

@media screen and (max-width: 600px) {
    .inidac-document {
        width: 400px;
        max-width: 400px
    }
}

.inidac-document {
    color: #fff
}

.inidac-document--bgmfghost {
    position: absolute;
    top: 350px;
    left: 0px;
    z-index: -1;
    width: 100%;
    height: 3000px;
    background: center top / 100% 100% repeat-y;
    pointer-events: none
}

html.no-webp .inidac-document--bgmfghost {
    background-image: url("/inidac/$site/components/inidac-document/bg_mfghost.png?_=20230619.144114")
}

html.webp .inidac-document--bgmfghost {
    background-image: url("/inidac/$site/components/inidac-document/bg_mfghost.png.webp?_=20230619.144114")
}

.inidac-document--bgRoad {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 7600px;
    background: center top / 100% 100% repeat-y;
    pointer-events: none
}

html.no-webp .inidac-document--bgRoad {
    background-image: url("/inidac/$site/components/inidac-document/bg_road@pc.png?_=20230619.144114")
}

html.webp .inidac-document--bgRoad {
    background-image: url("/inidac/$site/components/inidac-document/bg_road@pc.png.webp?_=20230619.144114")
}

@media screen and (max-width: 600px) {
    .inidac-document--bgRoad {
        background: center top / 100% no-repeat
    }

    html.no-webp .inidac-document--bgRoad {
        background-image: url("/inidac/$site/components/inidac-document/bg_road@sp.png?_=20230619.144114")
    }

    html.webp .inidac-document--bgRoad {
        background-image: url("/inidac/$site/components/inidac-document/bg_road@sp.png.webp?_=20230619.144114")
    }
}

.inidac-document--bgMangaGrad {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 6000px;
    background: 10% 0% / 100% 100% no-repeat;
    background-color: rgba(0, 0, 0, 0.2);
    mix-blend-mode: multiply;
    background-image: linear-gradient(-70deg, rgba(16, 68, 132, 0.7), rgba(40, 80, 133, 0.7), rgba(91, 183, 156, 0.7), rgba(81, 170, 127, 0.7));
    filter: brightness(0.7) contrast(1.2);
    pointer-events: none
}

@media screen and (max-width: 600px) {
    .inidac-document--bgMangaGrad {
        background: 100% 0% / 100% 100% no-repeat;
        background-image: linear-gradient(-70deg, rgba(16, 68, 132, 0.7), rgba(40, 80, 133, 0.7), rgba(91, 183, 156, 0.7), rgba(81, 170, 127, 0.7))
    }
}

.inidac-document--bgManga {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -3;
    width: 100%;
    height: 6000px;
    background: #b56648 center top / 1920px 2650px repeat;
    pointer-events: none
}

html.no-webp .inidac-document--bgManga {
    background-image: url("/inidac/$site/components/inidac-document/bg@pc.jpg?_=20230619.144114")
}

html.webp .inidac-document--bgManga {
    background-image: url("/inidac/$site/components/inidac-document/bg@pc.jpg.webp?_=20230619.144114")
}

@media screen and (max-width: 600px) {
    .inidac-document--bgManga {
        background: #b56648 center top / 250% repeat-y
    }
}

.inidac-document-pc {
    padding-bottom: 6rem;
}

.inidac-document-pc--wrapper {
    display: flex;
    padding-top: 100px
}

.inidac-document-pc--siblings {
    flex: 0 300px;
    z-index: 1
}

.inidac-document-pc--siblings-localnav {
    position: -webkit-sticky;
    position: sticky;
    top: 100px
}

.inidac-document-pc--content {
    flex: 1
}

.inidac-document-sp--siblings {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 0.5rem
}

.inidac-document-sp--sibling {
    display: block;
    flex: 50% 0;
    padding: 0.5rem 0 0
}

.inidac-document-sp--sibling-link {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 2.4rem;
    background: center center / auto 100% no-repeat;
    color: #111;
    font-weight: bold;
    letter-spacing: -1px
}

html.no-webp .inidac-document-sp--sibling-link {
    background-image: url("/inidac/$site/components/inidac-document/localnav_sp_bg.png?_=20230619.144114")
}

html.webp .inidac-document-sp--sibling-link {
    background-image: url("/inidac/$site/components/inidac-document/localnav_sp_bg.png.webp?_=20230619.144114")
}

.inidac-document-sp--sibling-link>span {
    transform: skew(-10deg)
}

.inidac-document-sp--sibling-link .inidac-localnav-item-text.len-12,
.inidac-document-sp--sibling-link .inidac-localnav-item-text.len-13,
.inidac-document-sp--sibling-link .inidac-localnav-item-text.len-14 {
    font-size: 14px;
    white-space: nowrap
}

.inidac-document-sp--local-list {
    display: flex;
    flex-wrap: wrap;
    margin: -1rem 0 1rem;
    padding: 0.5rem
}

.inidac-document-sp--local-item {
    display: block;
    flex: 33.33333% 0;
    padding: 0.5rem;
    outline: 1px solid red
}

.inidac-document-sp--local-link {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 2rem;
    background-color: #f2f2f2;
    color: #111;
    font-size: 0.8rem
}

.inidac-document-sp--content {
    padding: 1rem 1rem 6rem
}

.inidac-mojiBox {
    position: fixed;
    top: 0%;
    left: 50%;
    z-index: -1;
    height: 100%;
    min-width: 1000px;
    margin: 0 auto;
    margin-left: -500px
}

.inidac-moji.gyaaaa {
    width: 300px;
    height: 300px
}

@media screen and (max-width: 600px) {
    .inidac-moji.gyaaaa {
        width: 120px;
        height: 120px
    }
}

.inidac-moji.goaaa {
    width: 300px;
    height: 300px
}

@media screen and (max-width: 600px) {
    .inidac-moji.goaaa {
        width: 120px;
        height: 120px
    }
}

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

    body[data-page='guide'] .inidac-moji.gyaaaa,
    body[data-page='guide.gamemode'] .inidac-moji.gyaaaa,
    body[data-page='guide.tips'] .inidac-moji.gyaaaa,
    body[data-page='guide.customize'] .inidac-moji.gyaaaa,
    body[data-page='guide.season'] .inidac-moji.gyaaaa,
    body[data-page='guide.shop'] .inidac-moji.gyaaaa,
    body[data-page='car'] .inidac-moji.gyaaaa,
    body[data-page='course'] .inidac-moji.gyaaaa {
        top: 45%
    }
}

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

    body[data-page='guide'] .inidac-moji.goaaa,
    body[data-page='guide.gamemode'] .inidac-moji.goaaa,
    body[data-page='guide.tips'] .inidac-moji.goaaa,
    body[data-page='guide.customize'] .inidac-moji.goaaa,
    body[data-page='guide.season'] .inidac-moji.goaaa,
    body[data-page='guide.shop'] .inidac-moji.goaaa,
    body[data-page='car'] .inidac-moji.goaaa,
    body[data-page='course'] .inidac-moji.goaaa {
        top: 90%;
        left: 110%
    }
}

html.no-webp.ie body,
html.no-webp.msedge body {
    padding: 10px
}

html.no-webp.ie body .mainpage,
html.no-webp.msedge body .mainpage {
    display: none
}

html.gecko .ie,
html.chrome .ie,
html.safari .ie,
html.sp .ie {
    display: none;
    height: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-gnav-pc--segalogo a {
    position: fixed;
    top: 18px;
    left: 20px;
    z-index: 5000;
    width: 80px;
    height: 28px;
    font-size: 0px;
    transition: 300ms
}

html.no-webp .inidac-gnav-pc--segalogo a {
    background: url("/inidac/$site/components/inidac-gnav/segalogo.png?_=20230619.144114") center center/contain no-repeat
}

html.webp .inidac-gnav-pc--segalogo a {
    background: url("/inidac/$site/components/inidac-gnav/segalogo.png.webp?_=20230619.144114") center center/contain no-repeat
}

.inidac-gnav-pc--segalogo a.small {
    top: 10px;
    height: 20px
}

@media screen and (max-width: 1240px) {
    .inidac-gnav-pc--segalogo a {
        opacity: 0;
        pointer-events: none
    }
}

.inidac-gnav-pc {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 600;
    width: 100%
}

.inidac-gnav-pc--1st {
    position: relative;
    z-index: 1;
    margin-top: -8px;
    background-color: #222;
    box-shadow: 0 -3rem 3rem 1rem #000
}

.inidac-gnav-pc--1st-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    width: calc(100% - 260px);
    max-width: 1280px;
    min-width: 1000px;
    margin: 0 auto
}

.inidac-gnav-pc--1st-item {
    flex: 12.5% 0;
    height: 75px;
    transition: 200ms
}

.inidac-gnav-pc--1st-item.small {
    flex: 100px 0;
    height: 50.25px
}

.inidac-gnav-pc--1st-item:first-child {
    display: none
}

.inidac-gnav-pc--1st-link {
    color: transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin-left: -1px;
    padding-top: 4px;
    border-right: 1px solid #555;
    border-left: 1px solid #555;
    transform: skewX(-20deg)
}

.inidac-gnav-pc--1st-link::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: center center / auto no-repeat;
    transform: skewX(20deg)
}

@media screen {
    .inidac-gnav-pc--1st-link::after {
        background-size: auto 18%
    }
}

@media screen and (min-width: 1000px) {
    .inidac-gnav-pc--1st-link::after {
        background-size: auto 20%
    }
}

@media screen and (min-width: 1100px) {
    .inidac-gnav-pc--1st-link::after {
        background-size: auto 22%
    }
}

@media screen and (min-width: 1200px) {
    .inidac-gnav-pc--1st-link::after {
        background-size: auto 24%
    }
}

@media screen and (min-width: 1300px) {
    .inidac-gnav-pc--1st-link::after {
        background-size: auto 26%
    }
}

@media screen and (min-width: 1400px) {
    .inidac-gnav-pc--1st-link::after {
        background-size: auto 28%
    }
}

.inidac-gnav-pc--1st-link:hover::after {
    transform: skewX(20deg);
    filter: brightness(2%)
}

html.no-webp .inidac-gnav-pc--1st-link.top::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_top.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.top::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_top.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-pc--1st-link.news::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_news.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.news::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_news.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-pc--1st-link.guide::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.guide::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-pc--1st-link.car::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_car.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.car::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_car.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-pc--1st-link.course::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_course.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.course::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_course.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-pc--1st-link.ranking::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.ranking::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-pc--1st-link.special::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_special.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.special::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_special.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-pc--1st-link.store::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_store.png?_=20230619.144114")
}

html.webp .inidac-gnav-pc--1st-link.store::after {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_store.png.webp?_=20230619.144114")
}

.inidac-gnav-pc--1st-link {
    transition: 120ms transform cubic-bezier(0.3, 0.5, 0.6, 2.4);
    background-color: #222
}

.inidac-gnav-pc--1st-link:hover {
    background: linear-gradient(to bottom, #fff, #f4f4f4);
    box-shadow: 0 0 1rem -0.5rem #000;
    transform: translate(-2px, 4px) skewX(-20deg)
}

.inidac-gnav-bg {
    z-index: 9999;
    width: 100%;
    height: 100%
}

@media screen and (min-width: 601px) {
    .inidac-gnav-bg {
        position: absolute;
        background-color: #000
    }
}

@media screen and (max-width: 600px) {
    .inidac-gnav-bg {
        position: fixed;
        background-color: #000
    }
}

.inidac-gnav-humberger {
    color: transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10001;
    width: 60px;
    height: 60px;
    background: #000 center center / auto 70% no-repeat
}

html.no-webp .inidac-gnav-humberger.isOpen {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_btn_close.png?_=20230619.144114")
}

html.webp .inidac-gnav-humberger.isOpen {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_btn_close.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-humberger:not(.isOpen) {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_btn_open.png?_=20230619.144114")
}

html.webp .inidac-gnav-humberger:not(.isOpen) {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_btn_open.png.webp?_=20230619.144114")
}

.inidac-gnav-sp {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    width: 400px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    pointer-events: none
}

.inidac-gnav-sp.active {
    pointer-events: all
}

li:nth-child(1)>.inidac-gnav-sp--link {
    transition-delay: 100ms
}

li:nth-child(2)>.inidac-gnav-sp--link {
    transition-delay: 200ms
}

li:nth-child(3)>.inidac-gnav-sp--link {
    transition-delay: 300ms
}

li:nth-child(4)>.inidac-gnav-sp--link {
    transition-delay: 400ms
}

li:nth-child(5)>.inidac-gnav-sp--link {
    transition-delay: 500ms
}

li:nth-child(6)>.inidac-gnav-sp--link {
    transition-delay: 600ms
}

li:nth-child(7)>.inidac-gnav-sp--link {
    transition-delay: 700ms
}

li:nth-child(8)>.inidac-gnav-sp--link {
    transition-delay: 800ms
}

li:nth-child(9)>.inidac-gnav-sp--link {
    transition-delay: 900ms
}

li:nth-child(10)>.inidac-gnav-sp--link {
    transition-delay: 1000ms
}

li:nth-child(11)>.inidac-gnav-sp--link {
    transition-delay: 1100ms
}

li:nth-child(12)>.inidac-gnav-sp--link {
    transition-delay: 1200ms
}

li:nth-child(13)>.inidac-gnav-sp--link {
    transition-delay: 1300ms
}

li:nth-child(14)>.inidac-gnav-sp--link {
    transition-delay: 1400ms
}

li:nth-child(15)>.inidac-gnav-sp--link {
    transition-delay: 1500ms
}

li:nth-child(16)>.inidac-gnav-sp--link {
    transition-delay: 1600ms
}

li:nth-child(17)>.inidac-gnav-sp--link {
    transition-delay: 1700ms
}

li:nth-child(18)>.inidac-gnav-sp--link {
    transition-delay: 1800ms
}

li:nth-child(19)>.inidac-gnav-sp--link {
    transition-delay: 1900ms
}

.inidac-gnav-sp--link {
    color: transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    display: block;
    width: 100%;
    pointer-events: all
}

.inidac-gnav-sp--link.main {
    height: 60px;
    border-bottom: 1px solid #f4f4f4;
    background: rgba(17, 17, 17, 0.75) 20px center/auto 50% no-repeat
}

.inidac-gnav-sp--link.sub {
    height: 40px;
    border-bottom: 1px solid #ccc;
    background: rgba(17, 17, 17, 0.5) 50px center/auto 30% no-repeat;
    filter: brightness(90%)
}

html.no-webp .inidac-gnav-sp--link.logo {
    background-image: url("/inidac/$site/components/inidac-gnav/logo.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.logo {
    background-image: url("/inidac/$site/components/inidac-gnav/the_arcade_logo.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.top {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_top@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.top {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_top@sp.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.news {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_news@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.news {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_news@sp.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide@sp.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide01 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_01.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide01 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_01.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide02 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_02.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide02 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_02.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide03 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_03.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide03 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_03.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide04 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_04.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide04 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_04.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide05 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_05.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide05 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_05.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide06 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_06.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide06 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_06.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide07 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_07.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide07 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_07.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.guide08 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_08.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide08 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_08.png.webp?_=20230619.144114")
}

.inidac-gnav-sp--link.guide08::before {
    --mark-width: 110px;
    --mark-height: 172px;
    content: '';
    display: block;
    position: relative;
    left: 54%;
    top: 10%;
    width: calc(var(--mark-width) * 0.18);
    height: calc(var(--mark-height) * 0.18);
    transform: rotate(20deg)
}

html.no-webp .inidac-gnav-sp--link.guide08::before {
    background: url("/inidac/$site/components/inidac-gnav/beginner-mark.png?_=20230619.144114") center center/cover no-repeat
}

html.webp .inidac-gnav-sp--link.guide08::before {
    background: url("/inidac/$site/components/inidac-gnav/beginner-mark.png.webp?_=20230619.144114") center center/cover no-repeat
}

html.no-webp .inidac-gnav-sp--link.guide09 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_09.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.guide09 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_guide_09.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.car {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_car@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.car {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_car@sp.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.course {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_course@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.course {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_course@sp.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking@sp.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking01 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_01.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking01 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_01.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking02 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_02.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking02 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_02.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking03 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_03.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking03 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_03.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking04 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_04.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking04 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_04.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking05 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_05.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking05 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_05.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking06 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_06.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking06 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_06.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking07 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_07.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking07 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_07.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking08 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_08.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking08 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_08.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking09 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_09.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking09 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_09.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking10 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_10.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking10 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_10.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.ranking11 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_11.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.ranking11 {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_ranking_11.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.special {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_special@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.special {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_special@sp.png.webp?_=20230619.144114")
}

html.no-webp .inidac-gnav-sp--link.store {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_store@sp.png?_=20230619.144114")
}

html.webp .inidac-gnav-sp--link.store {
    background-image: url("/inidac/$site/components/inidac-gnav/nav_store@sp.png.webp?_=20230619.144114")
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s
}

.fade-enter {
    transform: translateX(20px);
    opacity: 0
}

.fade-leave-to {
    transform: translateX(-20px);
    opacity: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-goto-top {
    position: fixed;
    z-index: 9999;
    display: block;
    background: center center / contain no-repeat;
    font-size: 0px
}

html.no-webp .inidac-goto-top {
    background-image: url("/inidac/$site/components/inidac-goto-top/pagetop.png?_=20230619.144114")
}

html.webp .inidac-goto-top {
    background-image: url("/inidac/$site/components/inidac-goto-top/pagetop.png.webp?_=20230619.144114")
}

.inidac-goto-top:hover {
    filter: brightness(110%) contrast(102%)
}

@media screen and (min-width: 601px) {
    .inidac-goto-top {
        right: 50px;
        bottom: 50px;
        width: 80px;
        height: 80px
    }
}

@media screen and (max-width: 600px) {
    .inidac-goto-top {
        right: 20px;
        bottom: 20px;
        width: 60px;
        height: 60px
    }
}

.inidac-goto-top {
    transition: 300ms
}

.inidac-goto-top.show {
    transform: scale(1);
    opacity: 0.8
}

.inidac-goto-top:not(.show) {
    transform: scale(0.85);
    opacity: 0;
    pointer-events: none
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-guide--box {
    margin: auto
}

@media screen and (min-width: 601px) {
    .inidac-guide--box {
        width: 1000px;
        margin: 20px auto 140px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--box {
        margin: 20px 0 100px
    }
}

@media screen and (min-width: 601px) {
    .inidac-guide--flexbox {
        display: block;
        margin-bottom: 70px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--flexbox {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 50px
    }
}

.inidac-guide--textbox {
    height: 100%;
    color: #000;
    font-weight: bold;
    /* font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif; */
    font-feature-settings: 'palt'
}

@media screen and (min-width: 601px) {
    .inidac-guide--textbox {
        text-shadow: 1px 1px 0 #e0e0e0, -1px 1px 0 #e0e0e0, 1px -1px 0 #e0e0e0, -1px -1px 0 #e0e0e0;
        width: 100%;
        line-height: 1.8;
        font-size: 1.1em;
        text-align: center;
        margin: 0 auto
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--textbox {
        text-shadow: 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
        font-style: italic
    }
}

.inidac-guide--textbox .inidac-text {
    display: inline-block
}

@media screen and (min-width: 601px) {
    .inidac-guide--textbox p {
        margin-bottom: 20px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--textbox p {
        margin: 20px 0px
    }
}

@media screen and (min-width: 601px) {
    .inidac-guide--textbox .caution {
        text-align: left
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--textbox .caution {
        margin-bottom: 20px
    }
}

.inidac-guide--textbox .caution>li {
    text-indent: -1em;
    padding-left: 1em
}

@media screen and (min-width: 601px) {
    .inidac-guide--textbox .caution>li {
        margin-bottom: 0.2em
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--textbox .caution>li {
        margin-bottom: 0.5em
    }
}

.inidac-guide--textbox .inidac-nav-link {
    display: block;
    width: 170px;
    margin: 0 auto;
    font-style: normal;
    text-shadow: none
}

.inidac-guide--textbox dl.definition {
    margin-bottom: 40px
}

.inidac-guide--textbox dl.definition>dt {
    font-size: 18px
}

.inidac-guide--textbox dl.definition>dd {
    line-height: 1.4;
    margin-bottom: 20px
}

.inidac-guide--textbox dl.definition .red {
    color: red
}

.inidac-guide--textbox dl.definition:last-child {
    margin-bottom: 0px
}

@media screen and (min-width: 601px) {
    .inidac-guide--textbox .textleftbox {
        width: 806px;
        margin-bottom: 50px;
        background: rgba(255, 255, 255, 0.7);
        padding: 40px;
        border: solid 3px #111;
        box-shadow: 0.5rem 0.5rem 0 0 #111;
        text-align: left
    }
}

@media screen and (min-width: 601px) {
    .inidac-guide--arrow {
        margin: 20px auto 40px;
        text-align: center;
        width: 70px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--arrow {
        margin: 20px auto 30px;
        text-align: center;
        width: 50px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--image.multi {
        margin-bottom: -40px
    }
}

.inidac-guide--image {
    margin: 0;
    position: relative;
    text-align: center
}

@media screen and (min-width: 601px) {
    .inidac-guide--image {
        display: flex;
        justify-content: center;
        align-items: center
    }
}

.inidac-guide--image img {
    border: solid #fff 3px;
    box-shadow: #000 5px 5px 0 0
}

@media screen and (min-width: 601px) {
    .inidac-guide--image img {
        margin-bottom: 20px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--image img {
        margin-bottom: 20px
    }
}

.inidac-guide--image .noframe img {
    border: none;
    box-shadow: none
}

.inidac-guide--image.beforeimage {
    position: relative
}

@media screen and (min-width: 601px) {
    .inidac-guide--image.beforeimage {
        margin: 10px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--image.beforeimage {
        left: -10px
    }
}

.inidac-guide--image.afterimage {
    position: relative
}

@media screen and (min-width: 601px) {
    .inidac-guide--image.afterimage {
        margin: 10px
    }
}

@media screen and (max-width: 600px) {
    .inidac-guide--image.afterimage {
        bottom: 40px;
        left: 7px
    }
}

@media screen and (min-width: 601px) {
    .inidac-guide--image.left .afterimage {
        position: relative;
        left: -50px
    }
}

.inidac-guide--noimage {
    margin: auto;
    position: relative
}

.inidac-guide--noimage img {
    border: none;
    box-shadow: none;
    margin: 5px
}

.inidac-guide--noimage.beforeimage {
    right: 90px;
    position: relative
}

.inidac-guide--noimage.afterimage {
    bottom: 40px;
    position: relative
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-guide-document {
    width: 90%;
    margin: 5vw auto
}

@media screen and (min-width: 601px) {
    .inidac-guide-document--content {
        display: flex
    }

    .inidac-guide-document--content>nav {
        flex: 200px 0;
        background-color: rgba(238, 238, 238, 0.5);
        outline: 1px solid red
    }

    .inidac-guide-document--content>article {
        flex: 1;
        outline: 1px solid red
    }
}

.inidac-guide-document--title {
    text-align: center
}

.inidac-guide-document--title-text {
    position: relative;
    display: inline-block;
    padding-right: 3ex;
    padding-left: 1ex;
    color: #fff;
    font-size: 3vw;
    font-weight: bold;
    font-style: italic;
    font-feature-settings: 'palt'
}

.inidac-guide-document--title-text::before {
    content: '';
    position: absolute;
    left: -1ex;
    z-index: -1;
    width: calc(100% + 4ex);
    height: 100%;
    background-color: #000;
    transform: skewX(-20deg)
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-heading-lv0 {
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111;
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    margin-top: 2em;
    margin-bottom: 0.5em;
    color: #fff;
    font-size: 3vw;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    outline: 1px solid red
}

.inidac-heading-lv1 {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold
}

html.no-webp .inidac-heading-lv1 {
    background: url("/inidac/$site/components/inidac-heading/heading-level1.png?_=20230619.144114") center center/contain no-repeat
}

html.webp .inidac-heading-lv1 {
    background: url("/inidac/$site/components/inidac-heading/heading-level1.png.webp?_=20230619.144114") center center/contain no-repeat
}

@media screen and (min-width: 601px) {
    .inidac-heading-lv1 {
        margin: 0 auto 2rem;
        width: 40rem;
        height: 5.5rem;
        font-size: 2.5rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-heading-lv1 {
        margin: 0 auto 1rem;
        width: 23rem;
        height: 4rem;
        font-size: 1.5rem
    }
}

.inidac-heading-lv1>div {
    transform: skew(-10deg)
}

.inidac-heading-lv2 {
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111;
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 4rem;
    color: #fff;
    font-weight: bold;
    transform: skewX(-10deg);
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 3px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.8))
}

@media screen and (min-width: 601px) {
    .inidac-heading-lv2 {
        margin: 3rem auto;
        font-size: 2rem;
        max-width: 1000px
    }
}

@media screen and (max-width: 600px) {
    .inidac-heading-lv2 {
        margin: 1rem auto;
        font-size: 1.5rem
    }
}

.inidac-heading-lv2::before {
    content: '';
    position: absolute;
    top: -50%;
    z-index: -1;
    display: block;
    width: 100%;
    height: 200%
}

html.no-webp .inidac-heading-lv2::before {
    background: url("/inidac/$site/components/inidac-heading/heading-level2.png?_=20230619.144114") center center/auto 100% no-repeat
}

html.webp .inidac-heading-lv2::before {
    background: url("/inidac/$site/components/inidac-heading/heading-level2.png.webp?_=20230619.144114") center center/auto 100% no-repeat
}

@media screen and (max-width: 600px) {
    html.no-webp .inidac-heading-lv2::before {
        background: url("/inidac/$site/components/inidac-heading/heading-level2.png?_=20230619.144114") center center/auto 90% no-repeat
    }

    html.webp .inidac-heading-lv2::before {
        background: url("/inidac/$site/components/inidac-heading/heading-level2.png.webp?_=20230619.144114") center center/auto 90% no-repeat
    }
}

.inidac-heading-sub {
    line-height: 1.1
}

@media screen and (min-width: 601px) {
    .inidac-heading-sub {
        font-size: 1.25rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-heading-sub {
        font-size: 1rem
    }
}

.inidac-heading-lv3 {
    text-shadow: -2px -2px 1px #fff, -1px -2px 1px #fff, 0px -2px 1px #fff, 1px -2px 1px #fff, 2px -2px 1px #fff, -2px -1px 2px #fff, -1px -1px 2px #fff, 0px -1px 2px #fff, 1px -1px 2px #fff, 2px -1px 2px #fff, -2px 1px 2px #fff, -1px 1px 2px #fff, 0px 1px 2px #fff, 1px 1px 2px #fff, 2px 1px 2px #fff, -2px 2px 1px #fff, -1px 2px 1px #fff, 0px 2px 1px #fff, 1px 2px 1px #fff, 2px 2px 1px #fff;
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    display: flex;
    align-items: center;
    margin: 0 0;
    color: #b4431a;
    font-weight: bold
}

@media screen and (min-width: 601px) {
    .inidac-heading-lv3 {
        justify-content: center;
        width: auto;
        height: 6rem;
        font-size: 1.8rem;
        font-style: normal;
        margin-bottom: 10px
    }

    html.no-webp .inidac-heading-lv3 {
        background: url("/inidac/$site/components/inidac-heading/heading-level3.png?_=20230619.144114") center center/contain no-repeat
    }

    html.webp .inidac-heading-lv3 {
        background: url("/inidac/$site/components/inidac-heading/heading-level3.png.webp?_=20230619.144114") center center/contain no-repeat
    }
}

@media screen and (max-width: 600px) {
    .inidac-heading-lv3 {
        justify-content: center;
        width: auto;
        height: 3rem;
        font-size: 1.3rem;
        font-style: normal
    }

    html.no-webp .inidac-heading-lv3 {
        background: url("/inidac/$site/components/inidac-heading/heading-level3.png?_=20230619.144114") center center/contain no-repeat
    }

    html.webp .inidac-heading-lv3 {
        background: url("/inidac/$site/components/inidac-heading/heading-level3.png.webp?_=20230619.144114") center center/contain no-repeat
    }
}

.inidac-heading-lv3>div {
    transform: skew(-10deg)
}

.inidac-heading-lv4 {
    text-shadow: -2px -2px 1px #fff, -1px -2px 1px #fff, 0px -2px 1px #fff, 1px -2px 1px #fff, 2px -2px 1px #fff, -2px -1px 2px #fff, -1px -1px 2px #fff, 0px -1px 2px #fff, 1px -1px 2px #fff, 2px -1px 2px #fff, -2px 1px 2px #fff, -1px 1px 2px #fff, 0px 1px 2px #fff, 1px 1px 2px #fff, 2px 1px 2px #fff, -2px 2px 1px #fff, -1px 2px 1px #fff, 0px 2px 1px #fff, 1px 2px 1px #fff, 2px 2px 1px #fff;
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    display: flex;
    align-items: center;
    margin: 0 auto;
    color: #b4431a;
    font-weight: bold
}

@media screen and (min-width: 601px) {
    .inidac-heading-lv4 {
        justify-content: center;
        width: auto;
        height: 3rem;
        font-size: 1.5em;
        font-style: normal
    }

    html.no-webp .inidac-heading-lv4 {
        background: url("/inidac/$site/components/inidac-heading/heading-level4.png?_=20230619.144114") center center/contain no-repeat
    }

    html.webp .inidac-heading-lv4 {
        background: url("/inidac/$site/components/inidac-heading/heading-level4.png.webp?_=20230619.144114") center center/contain no-repeat
    }
}

@media screen and (max-width: 600px) {
    .inidac-heading-lv4 {
        justify-content: flex-start;
        width: auto;
        height: 3rem;
        font-size: 1.2rem;
        font-style: normal
    }

    html.no-webp .inidac-heading-lv4 {
        background: url("/inidac/$site/components/inidac-heading/heading-level4.png?_=20230619.144114") left center/contain no-repeat
    }

    html.webp .inidac-heading-lv4 {
        background: url("/inidac/$site/components/inidac-heading/heading-level4.png.webp?_=20230619.144114") left center/contain no-repeat
    }
}

.inidac-heading-lv4>div {
    transform: skew(-10deg)
}

.inidac-heading-lv5 {
    text-shadow: -2px -2px 1px #fff, -1px -2px 1px #fff, 0px -2px 1px #fff, 1px -2px 1px #fff, 2px -2px 1px #fff, -2px -1px 2px #fff, -1px -1px 2px #fff, 0px -1px 2px #fff, 1px -1px 2px #fff, 2px -1px 2px #fff, -2px 1px 2px #fff, -1px 1px 2px #fff, 0px 1px 2px #fff, 1px 1px 2px #fff, 2px 1px 2px #fff, -2px 2px 1px #fff, -1px 2px 1px #fff, 0px 2px 1px #fff, 1px 2px 1px #fff, 2px 2px 1px #fff;
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    color: #b4431a;
    font-weight: bold;
    text-align: center
}

@media screen and (min-width: 601px) {
    .inidac-heading-lv5 {
        transform: skew(-10deg);
        font-size: 1.5rem;
        font-style: normal;
        margin-bottom: 10px
    }
}

@media screen and (max-width: 600px) {
    .inidac-heading-lv5 {
        transform: skew(-10deg);
        margin-bottom: 4px;
        font-size: 1.2rem
    }
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: center center / contain no-repeat;
    vertical-align: middle
}

.inidac-icon[data-type='new'] {
    filter: var(--attend-color-forimage)
}

html.no-webp .inidac-icon[data-type='new'] {
    background-image: url("/inidac/$site/components/inidac-icon/new.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='new'] {
    background-image: url("/inidac/$site/components/inidac-icon/new.png.webp?_=20230619.144114")
}

.inidac-icon[data-type='new']::after {
    content: 'NEW';
    position: absolute;
    top: 51%;
    left: 46%;
    color: var(--attend-sub);
    letter-spacing: 0px;
    font-size: 0.9rem;
    font-weight: bold;
    transform: skewX(-10deg) translate(-50%, -50%)
}

.inidac-icon[data-type='style.isNew'] {
    filter: var(--attend-color-forimage)
}

html.no-webp .inidac-icon[data-type='style.isNew'] {
    background-image: url("/inidac/$site/components/inidac-icon/new.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='style.isNew'] {
    background-image: url("/inidac/$site/components/inidac-icon/new.png.webp?_=20230619.144114")
}

.inidac-icon[data-type='style.isNew']::after {
    content: 'NEW';
    position: absolute;
    top: 51%;
    left: 46%;
    color: var(--attend-sub);
    letter-spacing: -2px;
    font-size: 0.9rem;
    font-weight: bold;
    transform: skewX(-10deg) translate(-50%, -50%)
}

html.no-webp .inidac-icon[data-type='style.default_status'] {
    background-image: url("/inidac/$site/components/inidac-icon/default_status.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='style.default_status'] {
    background-image: url("/inidac/$site/components/inidac-icon/default_status.png.webp?_=20230619.144114")
}

html.no-webp .inidac-icon[data-type='favorite'] {
    background-image: url("/inidac/$site/components/inidac-icon/favorite.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='favorite'] {
    background-image: url("/inidac/$site/components/inidac-icon/favorite.png.webp?_=20230619.144114")
}

html.no-webp .inidac-icon[data-type='テクニカル'] {
    background-image: url("/inidac/$site/components/inidac-icon/technical.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='テクニカル'] {
    background-image: url("/inidac/$site/components/inidac-icon/technical.png.webp?_=20230619.144114")
}

html.no-webp .inidac-icon[data-type='低速'] {
    background-image: url("/inidac/$site/components/inidac-icon/technical.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='低速'] {
    background-image: url("/inidac/$site/components/inidac-icon/technical.png.webp?_=20230619.144114")
}

html.no-webp .inidac-icon[data-type='高速'] {
    background-image: url("/inidac/$site/components/inidac-icon/speed.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='高速'] {
    background-image: url("/inidac/$site/components/inidac-icon/speed.png.webp?_=20230619.144114")
}

html.no-webp .inidac-icon[data-type='DH'] {
    background-image: url("/inidac/$site/components/inidac-icon/dh.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='DH'] {
    background-image: url("/inidac/$site/components/inidac-icon/dh.png.webp?_=20230619.144114")
}

html.no-webp .inidac-icon[data-type='HC'] {
    background-image: url("/inidac/$site/components/inidac-icon/hc.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='HC'] {
    background-image: url("/inidac/$site/components/inidac-icon/hc.png.webp?_=20230619.144114")
}

html.no-webp .inidac-icon[data-type='AR'] {
    background-image: url("/inidac/$site/components/inidac-icon/ar.png?_=20230619.144114")
}

html.webp .inidac-icon[data-type='AR'] {
    background-image: url("/inidac/$site/components/inidac-icon/ar.png.webp?_=20230619.144114")
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

@media screen and (min-width: 601px) {
    .inidac-items-document {
        padding: 2rem 4rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-items-document {
        padding: 0rem 0
    }
}

@media screen and (min-width: 601px) {
    .inidac-items-document--nav {
        text-align: center
    }
}

@media screen and (max-width: 600px) {
    .inidac-items-document--nav {
        text-align: center
    }
}

.inidac-items-document--nav .uiButton {
    position: relative;
    width: 140px;
    height: 40px
}

.inidac-items-document--nav .uiButton::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2rem;
    bottom: 0;
    display: block;
    width: calc(100% + 4rem);
    height: 40px;
    background: center center / contain no-repeat;
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111;
    transform: skewX(-20deg)
}

.inidac-items-document--nav .uiButton::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2rem;
    bottom: 0;
    display: block;
    width: calc(100% + 4rem);
    height: 40px;
    background: center center / contain no-repeat;
    box-shadow: 0.3rem 0.3rem 0 0 #111;
    transform: skewX(-20deg)
}

.inidac-items-document--nav .uiButton-text {
    position: relative;
    display: block;
    color: #000;
    font-weight: bold;
    transform: skew(-10deg)
}

.inidac-items-document--nav .uiButton-text::before {
    content: '»';
    position: absolute;
    top: 0;
    right: -1.8rem;
    bottom: 0;
    height: 1ex;
    margin: auto;
    font-size: 1.25rem;
    line-height: 1.65ex;
    transform: translateY(-4px);
    transition: 300ms right;
    pointer-events: none
}

@media screen and (min-width: 601px) {
    .ItemEntryList {
        margin: 0 -3rem;
        padding: 1rem
    }
}

@media screen and (max-width: 600px) {
    .ItemEntryList {
        margin: 0 -1rem;
        padding: 0.5rem 0.25rem
    }
}

.ItemEntryList--bg {
    padding: 1rem
}

.ItemEntryList--flex,
.ItemEntryList--list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap
}

.ItemEntryList--searchResult {
    text-shadow: 0 -1px 1px #fff, 0 -1px 1px #fff, 0 -1px 1px #fff, -1px 1px 1px #fff, -1px 1px 1px #fff, 0px 1px 1px #fff, 1px 1px 1px #fff, 1px 1px 1px #fff;
    margin-bottom: 1rem;
    margin-left: 1rem;
    color: #333;
    font-weight: bold;
    text-align: center
}

.ItemEntryList--searchResult>b {
    color: #222;
    font-size: 1.25rem
}

@media screen and (min-width: 601px) {
    .ItemEntryBox {
        padding: 1rem
    }
}

@media screen and (max-width: 600px) {
    .ItemEntryBox {
        padding: 0.5rem
    }
}

.ItemEntryBox--content {
    display: block;
    height: 100%
}

.ItemEntryBox--content:not(.detail) {
    background-color: #fff
}

.ItemEntryBox--content:not(.detail) {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    border: 0.125rem solid #111
}

.ItemEntryBox--content:not(.detail):hover {
    box-shadow: 0.5rem 0.75rem 0 0 #111;
    transform: translateY(-.25rem);
    filter: brightness(110%) contrast(102%);
    cursor: pointer
}

.ItemEntryBox--content:not(.detail):active {
    box-shadow: 0.5rem 0.625rem 0 0 #111;
    transform: translateY(-.125rem);
    filter: brightness(95%) contrast(102%);
    cursor: pointer
}

@media screen and (max-width: 999px) {
    .ItemEntryBox {
        flex: 50% 0
    }
}

@media screen and (min-width: 1000px) {
    .ItemEntryBox {
        flex: 33.33333% 0
    }
}

@media screen and (min-width: 1600px) {
    .ItemEntryBox {
        flex: 25% 0
    }
}

@media screen and (min-width: 2000px) {
    .ItemEntryBox {
        flex: 20% 0
    }
}

@media screen and (min-width: 2400px) {
    .ItemEntryBox {
        flex: 16.66667% 0
    }
}

@media screen and (min-width: 2600px) {
    .ItemEntryBox {
        flex: 14.28571% 0
    }
}

.SearchBox {
    position: relative;
    color: #111;
    font-feature-settings: 'palt'
}

@media screen and (min-width: 601px) {
    .SearchBox {
        width: 900px
    }
}

@media screen and (max-width: 600px) {
    .SearchBox {
        width: 400px
    }
}

.SearchBox--bg {
    background: #d6c19b center top / cover no-repeat
}

html.no-webp .SearchBox--bg {
    background-image: url("/inidac/$site/components/inidac-items-document/kodawarikennsaku_bg.jpg?_=20230619.144114")
}

html.webp .SearchBox--bg {
    background-image: url("/inidac/$site/components/inidac-items-document/kodawarikennsaku_bg.jpg.webp?_=20230619.144114")
}

.SearchBox--bg .el-dialog--content {
    padding-bottom: 2rem
}

.SearchBox--heading {
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111;
    padding-top: 1rem;
    color: #f2f2f2;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    transform: scale(1.05, 1)
}

.SearchBox--subheading {
    position: relative;
    display: inline-block;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: bold
}

.SearchBox--subheading.hasTips {
    cursor: help
}

.SearchBox--subheading::after {
    content: '';
    position: absolute;
    top: -1rem;
    left: -0.5rem;
    z-index: 100;
    display: block;
    width: 12rem;
    height: 4rem;
    background: left center / contain no-repeat
}

html.no-webp .SearchBox--subheading::after {
    background-image: url("/inidac/$site/components/inidac-items-document/kodawarikennsaku_titlebg.png?_=20230619.144114")
}

html.webp .SearchBox--subheading::after {
    background-image: url("/inidac/$site/components/inidac-items-document/kodawarikennsaku_titlebg.png.webp?_=20230619.144114")
}

.SearchBox--subheading-text {
    text-shadow: 0 -1px 2px #aa5e3e, 0 -1px 2px #aa5e3e, 0 -1px 2px #aa5e3e, 0 -1px 2px #aa5e3e, -1px 1px 1px #aa5e3e, 0px 1px 1px #aa5e3e, 1px 1px 1px #aa5e3e, 0px 2px 1px #aa5e3e, 1px 2px 1px #aa5e3e, 2px 2px 1px #aa5e3e, 1px 3px 1px #aa5e3e, 2px 3px 1px #aa5e3e, 3px 3px 1px #aa5e3e, 2px 4px 1px #aa5e3e, 3px 4px 1px #aa5e3e, 4px 4px 1px #aa5e3e, 3px 5px 1px #aa5e3e, 4px 5px 1px #aa5e3e, 5px 5px 1px #aa5e3e, 4px 6px 1px #aa5e3e, 5px 6px 1px #aa5e3e, 6px 6px 1px #aa5e3e;
    position: relative;
    z-index: 101;
    display: inline-block;
    color: #fff;
    transform: skew(-10deg)
}

.SearchBox--checkbox {
    position: relative;
    z-index: 102 !important;
    width: 9rem;
    height: 3rem;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem
}

.SearchBox--main {
    padding: 0 2rem
}

.SearchBox--result {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    background-color: #111;
    color: #f2f2f2
}

@media screen and (min-width: 601px) {
    .SearchBox--result {
        font-size: 1.25rem
    }
}

@media screen and (max-width: 600px) {
    .SearchBox--result {
        padding-right: 2rem;
        font-size: 1rem
    }
}

@media screen and (min-width: 601px) {
    .SearchBox--result>span {
        margin-right: 3rem
    }
}

@media screen and (max-width: 600px) {
    .SearchBox--result>span {
        margin-right: 1rem
    }
}

.SearchBox--result b {
    color: #f8f8f8;
    font-size: 125%;
    font-weight: bold
}

.SearchBox--tips-mark {
    position: relative;
    z-index: 120;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #fff;
    border-radius: 100%;
    background-image: linear-gradient(150deg, #cae1ec, #287ec7);
    color: #fff
}

.SearchBox--tips-text {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    position: absolute;
    z-index: 150;
    display: inline-block;
    width: 20rem;
    padding: 0.5rem;
    border: 2px solid #111;
    background-color: #fff;
    color: #111;
    font-size: 80%
}

@media screen and (min-width: 601px) {
    .SearchBox--tips-text {
        margin-top: -1rem;
        margin-left: 1rem
    }
}

@media screen and (max-width: 600px) {
    .SearchBox--tips-text {
        top: 1rem;
        left: 0
    }
}

.SearchBox--tips-text:before {
    content: '';
    position: absolute
}

@media screen and (min-width: 601px) {
    .SearchBox--tips-text:before {
        right: 100%;
        width: 0;
        height: 0;
        border: 0.5rem solid transparent;
        border-right-color: #111
    }
}

@media screen and (max-width: 600px) {
    .SearchBox--tips-text:before {
        top: -0.75rem;
        right: -0.75rem;
        z-index: 1;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 100%;
        background-color: #111
    }
}

@media screen and (min-width: 601px) {
    .SearchBox--tips-text:after {
        content: '';
        position: absolute;
        right: calc(100% - 2px);
        width: 0;
        height: 0;
        border: 0.5rem solid transparent;
        border-right-color: #f2f2f2
    }
}

@media screen and (max-width: 600px) {
    .SearchBox--tips-text:after {
        content: '＋';
        position: absolute;
        top: -0.75rem;
        right: -0.75rem;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 1.5rem;
        color: #f2f2f2;
        line-height: 1;
        transform: rotate(45deg)
    }
}

.DialogClose {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    color: transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.DialogClose:hover {
    transform: scale(1.1)
}

.DialogClose:active {
    transform: scale(0.9)
}

.DialogClose::before,
.DialogClose::after {
    content: '';
    position: absolute;
    top: 50%;
    display: block;
    width: 100%;
    height: 0.25rem;
    background-color: #111
}

.DialogClose::before {
    transform: rotate(-45deg)
}

.DialogClose::after {
    transform: rotate(45deg)
}

.SearchBox--bg .el-dialog--content::-webkit-scrollbar {
    width: 10px
}

.SearchBox--bg .el-dialog--content::-webkit-scrollbar-track {
    background-color: #000 !important
}

.SearchBox--bg .el-dialog--content::-webkit-scrollbar-thumb {
    background-color: #fff !important
}

.kodawari-sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
    justify-content: center
}

@media screen and (min-width: 601px) {
    .kodawari-sticky {
        top: 4rem
    }
}

@media screen and (max-width: 600px) {
    .kodawari-sticky {
        top: 1rem
    }
}

@media screen and (max-width: 600px) {
    .checkboxlist {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 95%;
        margin: 0 auto
    }
}

.el-dialog--wrap {
    z-index: 20000 !important
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-localnav-item-pc {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: relative;
    left: -1rem;
    display: block;
    width: 19rem;
    height: 3.5rem;
    background: right center / contain no-repeat;
    color: #000
}

.inidac-localnav-item-pc {
    transition: left 100ms
}

.inidac-localnav-item-pc:hover {
    left: -0.75rem;
    color: #f2f2f2;
    cursor: pointer
}

.inidac-localnav-item-pc:hover::before {
    background-color: #d7a715
}

.inidac-localnav-item-pc>span {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: 2rem;
    font-size: 1.42rem;
    font-weight: bold;
    text-shadow: 1px 0 0 1px;
    letter-spacing: -0.125rem;
    transform: skew(-10deg)
}

.inidac-localnav-item-pc>span.len-14 {
    letter-spacing: -2.8px
}

.inidac-localnav-item-pc::before,
.inidac-localnav-item-pc::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%
}

.inidac-localnav-item-pc::before {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    z-index: 0;
    background-color: #f2f2f2;
    transform: skewX(-20deg);
    transform-origin: 100% 0
}

.inidac-localnav-item-pc::after {
    top: -.125rem;
    left: -.125rem;
    z-index: 10;
    width: calc(100% + .25rem);
    height: calc(100% + .25rem);
    background: right center / auto 100% no-repeat;
    transform: translateZ(0px);
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated
}

html.no-webp .inidac-localnav-item-pc::after {
    background-image: url("/inidac/$site/components/inidac-localnav-pc/localnav_guide_border.png?_=20230619.144114")
}

html.webp .inidac-localnav-item-pc::after {
    background-image: url("/inidac/$site/components/inidac-localnav-pc/localnav_guide_border.png.webp?_=20230619.144114")
}

.inidac-localnav-subitem-pc {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    position: relative;
    left: -1rem;
    z-index: 5;
    display: block;
    width: 15rem;
    height: 3rem;
    margin-bottom: -0.25rem;
    border: 0.25rem solid #111;
    background-color: #f2f2f2;
    color: #111
}

.inidac-localnav-subitem-pc {
    transition: left 100ms
}

.inidac-localnav-subitem-pc:hover {
    left: -0.75rem;
    color: #f2f2f2;
    cursor: pointer;
    background-color: #d7a715
}

.inidac-localnav-subitem-pc:hover::before {
    background-color: #d7a715
}

.inidac-localnav-subitem-pc>span {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: 1rem;
    padding-left: 2rem;
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 1px 0 0 1px;
    letter-spacing: -0.125rem;
    transform: skew(-10deg)
}

.inidac-localnav-item-group-pc {
    margin-bottom: 0.75rem
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-mfghostbg {
    height: 0px
}

@media screen and (min-width: 601px) {
    .inidac-mfghostbg--inner {
        min-width: 1000px;
        padding-top: 4rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-mfghostbg--inner {
        width: 400px;
        max-width: 400px
    }
}

.inidac-mfghostbg--inner-koma {
    position: fixed;
    z-index: -1;
    background: center top / contain no-repeat;
    pointer-events: none
}

html.no-webp .inidac-mfghostbg--inner-koma01 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost01.png?_=20230619.144114")
}

html.webp .inidac-mfghostbg--inner-koma01 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost01.png.webp?_=20230619.144114")
}

@media screen and (min-width: 601px) {
    .inidac-mfghostbg--inner-koma01 {
        width: 739px;
        height: 710px;
        top: 100px;
        left: 50px
    }
}

@media screen and (max-width: 600px) {
    .inidac-mfghostbg--inner-koma01 {
        margin-top: 550px;
        width: 230px;
        height: 220px;
        top: 580px;
        left: -20px
    }
}

html.no-webp .inidac-mfghostbg--inner02-koma02 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost02.png?_=20230619.144114")
}

html.webp .inidac-mfghostbg--inner02-koma02 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost02.png.webp?_=20230619.144114")
}

@media screen and (min-width: 601px) {
    .inidac-mfghostbg--inner02-koma02 {
        margin-top: 1000px;
        width: 609px;
        height: 627px;
        top: 1000px;
        right: 0px
    }
}

@media screen and (max-width: 600px) {
    .inidac-mfghostbg--inner02-koma02 {
        margin-top: 1500px;
        width: 210px;
        height: 220px;
        top: 1500px;
        right: 0px
    }
}

.inidac-mfghostbg--inner03-koma03 {
    margin-top: 2000px
}

html.no-webp .inidac-mfghostbg--inner03-koma03 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost03.png?_=20230619.144114")
}

html.webp .inidac-mfghostbg--inner03-koma03 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost03.png.webp?_=20230619.144114")
}

@media screen and (min-width: 601px) {
    .inidac-mfghostbg--inner03-koma03 {
        width: 718px;
        height: 386px;
        top: 2000px;
        left: 0px
    }
}

@media screen and (max-width: 600px) {
    .inidac-mfghostbg--inner03-koma03 {
        width: 270px;
        height: 150px;
        top: 2500px;
        left: -110px
    }
}

html.no-webp .inidac-mfghostbg--inner04-koma04 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost04.png?_=20230619.144114")
}

html.webp .inidac-mfghostbg--inner04-koma04 {
    background-image: url("/inidac/$site/components/inidac-mfghostbg/bg_mfghost04.png.webp?_=20230619.144114")
}

@media screen and (min-width: 601px) {
    .inidac-mfghostbg--inner04-koma04 {
        margin-top: 3000px;
        width: 482px;
        height: 601px;
        top: 3000px;
        right: 0px
    }
}

@media screen and (max-width: 600px) {
    .inidac-mfghostbg--inner04-koma04 {
        margin-top: 2800px;
        width: 170px;
        height: 220px;
        top: 3500px;
        right: 0px
    }
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-moji {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.inidac-moji.side-left {
    position: absolute;
    top: 25%;
    right: 106%;
    transform: translateX(50%) translateY(-50%)
}

@media screen and (min-width: 601px) {
    .inidac-moji.side-left {
        z-index: -1
    }
}

@media screen and (max-width: 600px) {
    .inidac-moji.side-left {
        z-index: -1;
        top: 28%;
        right: 65%
    }
}

.inidac-moji.side-right {
    position: absolute;
    top: 93%;
    left: 110%;
    transform: translateX(-50%) translateY(-50%)
}

@media screen and (min-width: 601px) {
    .inidac-moji.side-right {
        z-index: -1
    }
}

@media screen and (max-width: 600px) {
    .inidac-moji.side-right {
        z-index: -1;
        top: 85%;
        left: 65%
    }
}

.inidac-moji--inner {
    width: 100%;
    height: 100%
}

.inidac-moji--one {
    position: absolute;
    background: left top / 100% auto no-repeat;
    animation: inid-moji 400ms steps(1) infinite both
}

@keyframes inid-moji {
    0% {
        transform: translate(-1.53989px, -.55803px) rotate(-.05204deg) scale(.99552)
    }

    10% {
        transform: translate(.99833px, .04755px) rotate(1.01256deg) scale(1.00735)
    }

    20% {
        transform: translate(1.34927px, .1922px) rotate(-1.58679deg) scale(.99908)
    }

    30% {
        transform: translate(-1.21282px, -.40025px) rotate(-.49063deg) scale(.98731)
    }

    40% {
        transform: translate(3.43586px, .44591px) rotate(.49069deg) scale(.99001)
    }

    50% {
        transform: translate(-.43161px, 1.09744px) rotate(.12417deg) scale(.99578)
    }

    60% {
        transform: translate(-.63007px, 1.20225px) rotate(.54145deg) scale(1.00034)
    }

    70% {
        transform: translate(-.88017px, .77228px) rotate(-1.60311deg) scale(.98222)
    }

    80% {
        transform: translate(.38056px, -.10591px) rotate(-.91719deg) scale(1.01318)
    }

    90% {
        transform: translate(-.87378px, -.20455px) rotate(-.26399deg) scale(1.01777)
    }

    100% {
        transform: translate(.56179px, .55382px) rotate(-.02472deg) scale(1.00983)
    }
}

.inidac-moji--one:nth-child(1) {
    animation-delay: 93.84807ms
}

.inidac-moji--one:nth-child(2) {
    animation-delay: 368.0427ms
}

.inidac-moji--one:nth-child(3) {
    animation-delay: 289.90075ms
}

.inidac-moji--one:nth-child(4) {
    animation-delay: 141.93142ms
}

.inidac-moji--one:nth-child(5) {
    animation-delay: 201.65185ms
}

.inidac-moji--one:nth-child(6) {
    animation-delay: 120.57454ms
}

.inidac-moji--one:nth-child(7) {
    animation-delay: 133.75025ms
}

.inidac-moji--one:nth-child(8) {
    animation-delay: 279.75761ms
}

.inidac-moji--one:nth-child(9) {
    animation-delay: 3.96321ms
}

html.no-webp .inidac-moji--one.gi {
    background-image: url("/inidac/$site/components/inidac-moji/gi.png?_=20230619.144114")
}

html.webp .inidac-moji--one.gi {
    background-image: url("/inidac/$site/components/inidac-moji/gi.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.ya {
    background-image: url("/inidac/$site/components/inidac-moji/ya.png?_=20230619.144114")
}

html.webp .inidac-moji--one.ya {
    background-image: url("/inidac/$site/components/inidac-moji/ya.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.a1 {
    background-image: url("/inidac/$site/components/inidac-moji/a.png?_=20230619.144114")
}

html.webp .inidac-moji--one.a1 {
    background-image: url("/inidac/$site/components/inidac-moji/a.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.a2 {
    background-image: url("/inidac/$site/components/inidac-moji/a02.png?_=20230619.144114")
}

html.webp .inidac-moji--one.a2 {
    background-image: url("/inidac/$site/components/inidac-moji/a02.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.a3 {
    background-image: url("/inidac/$site/components/inidac-moji/a03.png?_=20230619.144114")
}

html.webp .inidac-moji--one.a3 {
    background-image: url("/inidac/$site/components/inidac-moji/a03.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.a4 {
    background-image: url("/inidac/$site/components/inidac-moji/a04.png?_=20230619.144114")
}

html.webp .inidac-moji--one.a4 {
    background-image: url("/inidac/$site/components/inidac-moji/a04.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.a5 {
    background-image: url("/inidac/$site/components/inidac-moji/a05.png?_=20230619.144114")
}

html.webp .inidac-moji--one.a5 {
    background-image: url("/inidac/$site/components/inidac-moji/a05.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.a6 {
    background-image: url("/inidac/$site/components/inidac-moji/a06.png?_=20230619.144114")
}

html.webp .inidac-moji--one.a6 {
    background-image: url("/inidac/$site/components/inidac-moji/a06.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.aa {
    background-image: url("/inidac/$site/components/inidac-moji/aa.png?_=20230619.144114")
}

html.webp .inidac-moji--one.aa {
    background-image: url("/inidac/$site/components/inidac-moji/aa.png.webp?_=20230619.144114")
}

html.no-webp .inidac-moji--one.go {
    background-image: url("/inidac/$site/components/inidac-moji/go.png?_=20230619.144114")
}

html.webp .inidac-moji--one.go {
    background-image: url("/inidac/$site/components/inidac-moji/go.png.webp?_=20230619.144114")
}

.inidac-moji--one.gyaaaa-1 {
    margin-left: 0%;
    margin-top: 0%;
    width: 37%;
    padding-bottom: 59%;
    height: 0
}

.inidac-moji--one.gyaaaa-2 {
    margin-left: 36%;
    margin-top: 44%;
    width: 11%;
    padding-bottom: 14%;
    height: 0
}

.inidac-moji--one.gyaaaa-3 {
    margin-left: 37%;
    margin-top: 19%;
    width: 20%;
    padding-bottom: 20%;
    height: 0
}

.inidac-moji--one.gyaaaa-4 {
    margin-left: 55%;
    margin-top: 20%;
    width: 37%;
    padding-bottom: 36%;
    height: 0
}

.inidac-moji--one.gyaaaa-5 {
    margin-left: 77%;
    margin-top: 52%;
    width: 20%;
    padding-bottom: 18%;
    height: 0
}

.inidac-moji--one.gyaaaa-6 {
    margin-left: 69%;
    margin-top: 70%;
    width: 30%;
    padding-bottom: 29%;
    height: 0
}

.inidac-moji--one.goaaa-1 {
    margin-left: 55%;
    margin-top: -6%;
    width: 55%;
    padding-bottom: 59%;
    height: 0
}

.inidac-moji--one.goaaa-2 {
    margin-left: 51%;
    margin-top: 33%;
    width: 22%;
    padding-bottom: 17%;
    height: 0
}

.inidac-moji--one.goaaa-3 {
    margin-left: 29%;
    margin-top: 30%;
    width: 24%;
    padding-bottom: 23%;
    height: 0
}

.inidac-moji--one.goaaa-4 {
    margin-left: 17%;
    margin-top: 40%;
    width: 15%;
    padding-bottom: 11%;
    height: 0
}

.inidac-moji--one.goaaa-5 {
    margin-left: -2%;
    margin-top: 40%;
    width: 20%;
    padding-bottom: 17%;
    height: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-nav-link {
    position: relative;
    display: inline-block;
    height: 3rem;
    min-width: 7rem;
    margin-left: 2rem;
    background: center center / contain no-repeat;
    cursor: pointer
}

.inidac-nav-link.large {
    height: 4rem;
    min-width: 8rem;
    padding-right: 1.5em !important;
    padding-left: 1.5em !important;
    font-size: 1.25rem
}

.inidac-nav-link::before,
.inidac-nav-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2rem;
    bottom: 0;
    display: block;
    width: calc(100% + 4rem);
    height: 100%;
    background: center center / contain no-repeat
}

.inidac-nav-link::before {
    background-color: #f2f2f2;
    box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111;
    transform: skewX(-20deg)
}

.inidac-nav-link:hover::before {
    background: linear-gradient(to bottom, #111 35%, #666 48%, #666 52%, #111 58%);
    box-shadow: inset 0 0 0 2px #f2f2f2, inset 0 0 0 4px #111;
    transform: skewX(-20deg)
}

.inidac-nav-link::after {
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    transform: skewX(-20deg)
}

.inidac-nav-link.submit::before {
    background-color: #c66727;
    box-shadow: inset 0 0 0 2px #c66727, inset 0 0 0 4px #f2f2f2, inset 0 0 0 6px #c66727;
    transform: skewX(-20deg)
}

.inidac-nav-link--text {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 100%;
    font-weight: bold;
    transform: skewX(-10deg)
}

.inidac-nav-link--text {
    color: #111
}

.inidac-nav-link--text.submit {
    color: #f2f2f2
}

.inidac-nav-link--text.prev {
    padding-left: 1rem
}

.inidac-nav-link--text.next {
    padding-right: 1rem
}

.inidac-nav-link--text::before {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1ex;
    margin: auto;
    font-size: 1.25rem;
    line-height: 1.35ex;
    transform: translateY(-4px);
    pointer-events: none
}

.inidac-nav-link--text.prev::before {
    content: '«';
    left: -1rem;
    transition: 300ms left
}

.inidac-nav-link--text.next::before {
    content: '»';
    right: -1rem;
    transition: 300ms right
}

.inidac-nav-link:hover>.inidac-nav-link--text {
    color: #f2f2f2
}

.inidac-nav-link:hover>.inidac-nav-link--text.prev::before {
    left: -1.5rem
}

.inidac-nav-link:hover>.inidac-nav-link--text.next::before {
    right: -1.5rem
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-page-title {
    position: relative;
    overflow: hidden
}

@media screen and (min-width: 601px) {
    .inidac-page-title {
        width: 100%;
        height: 227px;
        background: #000 center bottom / 1920px auto no-repeat
    }

    html.no-webp .inidac-page-title {
        background-image: url("/inidac/$site/components/inidac-page-title/header_bg.jpg?_=20230619.144114")
    }

    html.webp .inidac-page-title {
        background-image: url("/inidac/$site/components/inidac-page-title/header_bg.jpg.webp?_=20230619.144114")
    }
}

@media screen and (max-width: 600px) {
    .inidac-page-title {
        width: 100%;
        height: 120px;
        background: #000 center center / auto 100% no-repeat
    }

    html.no-webp .inidac-page-title {
        background-image: url("/inidac/$site/components/inidac-page-title/header_bg_sp.jpg?_=20230619.144114")
    }

    html.webp .inidac-page-title {
        background-image: url("/inidac/$site/components/inidac-page-title/header_bg_sp.jpg.webp?_=20230619.144114")
    }
}

.inidac-page-title--wrapper {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    max-width: 1920px;
    margin: auto;
    border-bottom: 2px #111 solid
}

@media screen and (min-width: 601px) {
    .inidac-page-title--wrapper::before {
        content: '';
        position: absolute;
        display: block;
        width: 1920px;
        height: 100%;
        background: linear-gradient(270deg, transparent, #000) left center/10px auto no-repeat, linear-gradient(270deg, transparent, #000) left center/100px auto no-repeat, linear-gradient(90deg, transparent, #000) right center/10px auto no-repeat, linear-gradient(90deg, transparent, #000) right center/100px auto no-repeat
    }
}

.inidac-page-title h1 {
    text-shadow: 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, 0 -1px 2px #111, -1px 1px 1px #111, 0px 1px 1px #111, 1px 1px 1px #111, 0px 2px 1px #111, 1px 2px 1px #111, 2px 2px 1px #111, 1px 3px 1px #111, 2px 3px 1px #111, 3px 3px 1px #111, 2px 4px 1px #111, 3px 4px 1px #111, 4px 4px 1px #111, 3px 5px 1px #111, 4px 5px 1px #111, 5px 5px 1px #111, 4px 6px 1px #111, 5px 6px 1px #111, 6px 6px 1px #111;
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold
}

@media screen and (min-width: 601px) {
    .inidac-page-title h1 {
        font-size: 2.5rem
    }
}

@media screen and (max-width: 600px) {
    .inidac-page-title h1 {
        font-size: 1.5rem
    }
}

.inidac-page-title .DAClogo {
    position: absolute;
    background-position: center top;
    background-size: contain;
    background-repeat: no-repeat;
    font-size: 0px;
    transition: 300ms
}

html.no-webp .inidac-page-title .DAClogo {
    background-image: url("/inidac/$site/components/inidac-page-title/logo.png?_=20230619.144114")
}

html.webp .inidac-page-title .DAClogo {
    background-image: url("/inidac/$site/components/inidac-page-title/logo.png.webp?_=20230619.144114")
}

.inidac-page-title .DAClogo:hover {
    filter: brightness(120%)
}

@media screen and (min-width: 601px) {
    .inidac-page-title .DAClogo {
        /* top: 88px;
        left: 22%;
        width: 300px;
        height: 130px */
        width: 450px;
        height: 240px;
        left: 18%;
        top: 20px;
    }
}

@media screen and (max-width: 600px) {
    .inidac-page-title .DAClogo {
        /* bottom: 2px;
        right: 0;
        width: 120px;
        height: 52px */
        right: 35px;
        bottom: -10px;
        width: 150px;
        height: 91px;
    }
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-site-footer {
    font-family: "YU GOTHIC", "游ゴシック", "Work Sans", sans-serif;
    font-feature-settings: 'palt';
    color: #fff
}

@media screen and (min-width: 601px) {
    .inidac-site-footer {
        font-size: 12px
    }

    html.no-webp .inidac-site-footer {
        background: url("/inidac/$site/components/inidac-site-footer/footer_bg@pc.jpg?_=20230619.144114") center center/100% auto no-repeat
    }

    html.webp .inidac-site-footer {
        background: url("/inidac/$site/components/inidac-site-footer/footer_bg@pc.jpg.webp?_=20230619.144114") center center/100% auto no-repeat
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer {
        font-size: 16px
    }

    html.no-webp .inidac-site-footer {
        background: url("/inidac/$site/components/inidac-site-footer/footer_bg@sp.jpg?_=20230619.144114") center center/100% auto repeat-y
    }

    html.webp .inidac-site-footer {
        background: url("/inidac/$site/components/inidac-site-footer/footer_bg@sp.jpg.webp?_=20230619.144114") center center/100% auto repeat-y
    }
}

.inidac-site-footer-inner {
    margin: 0px auto
}

@media screen and (min-width: 601px) {
    .inidac-site-footer-inner {
        width: 1000px;
        padding: 50px 0px
    }

    .footer-logo {
        /* text-align: center; */
    }

    .sega-logo {
        width: 150px
    }

    .walhap-logo {
        margin-left: 100px;
        width: 350px
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer-inner {
        width: 100%;
        padding: 50px 0px
    }

    .sega-logo {
        width: 100px
    }

    .walhap-logo {
        margin-left: 10px;
        width: 180px
    }
}

.inidac-site-footer-inner-bnr {
    display: flex;
    flex-wrap: wrap
}

@media screen and (min-width: 601px) {
    .inidac-site-footer-inner-bnr {
        justify-content: center;
        margin: 10px auto 30px
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer-inner-bnr {
        width: 360px;
        margin: -10px auto
    }
}

.inidac-site-footer-inner-bnr li a {
    display: block;
    font-size: 0px
}

@media screen and (min-width: 601px) {
    .inidac-site-footer-inner-bnr li a {
        width: 192px;
        height: 60px;
        margin: 0px 5px
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer-inner-bnr li a {
        width: 160px;
        height: 50px;
        margin: 10px 10px 6px
    }
}

.inidac-site-footer-inner-bnr li a:hover {
    filter: brightness(120%)
}

html.no-webp .inidac-site-footer-inner-bnr li.aime a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_aime.jpg?_=20230619.144114") center center/contain no-repeat
}

html.webp .inidac-site-footer-inner-bnr li.aime a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_aime.jpg.webp?_=20230619.144114") center center/contain no-repeat
}

html.no-webp .inidac-site-footer-inner-bnr li.twitter a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_twitter.jpg?_=20230619.144114") center center/contain no-repeat
}

html.webp .inidac-site-footer-inner-bnr li.twitter a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_twitter.jpg.webp?_=20230619.144114") center center/contain no-repeat
}

@media screen and (min-width: 601px) {
    .inidac-site-footer-inner-bnr li.twitter>ul {
        font-size: 14px;
        margin: 5px
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer-inner-bnr li.twitter>ul {
        font-size: 14px;
        margin: 0px 10px 0px;
        line-height: 1.2
    }
}

html.no-webp .inidac-site-footer-inner-bnr li.line a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_line.jpg?_=20230619.144114") center center/contain no-repeat
}

html.webp .inidac-site-footer-inner-bnr li.line a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_line.jpg.webp?_=20230619.144114") center center/contain no-repeat
}

html.no-webp .inidac-site-footer-inner-bnr li.youtube a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_youtube.jpg?_=20230619.144114") center center/contain no-repeat
}

html.webp .inidac-site-footer-inner-bnr li.youtube a {
    background: url("/inidac/$site/components/inidac-site-footer/bnr_youtube.jpg.webp?_=20230619.144114") center center/contain no-repeat
}

@media screen and (min-width: 601px) {
    .inidac-site-footer-inner-textLink {
        display: flex;
        justify-content: center;
        margin: 0px auto 20px
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer-inner-textLink {
        margin: 30px 0px 40px;
        text-align: center
    }
}

.inidac-site-footer-inner-textLink li a {
    color: #fff
}

@media screen and (min-width: 601px) {
    .inidac-site-footer-inner-textLink li a {
        margin: 0px 10px;
        padding-right: 20px;
        border-right: solid 1px #fff;
        font-size: 14px
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer-inner-textLink li a {
        display: block;
        margin: 10px 0px;
        font-size: 18px
    }
}

.inidac-site-footer-inner-textLink li a:hover {
    text-decoration: underline
}

.inidac-site-footer-inner-textLink li:last-child a {
    padding-right: 0px;
    border: none
}

@media screen and (min-width: 601px) {
    .inidac-site-footer-inner p {
        margin-top: 30px
    }
}

@media screen and (max-width: 600px) {
    .inidac-site-footer-inner p {
        width: 340px;
        margin: 30px auto 0px
    }
}

.inidac-site-footer-inner p a {
    color: #daa618
}

.inidac-site-footer-inner p a:hover {
    text-decoration: underline
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-subheading {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold
}

html.no-webp .inidac-subheading {
    background: url("/inidac/$site/components/inidac-subheading/h2_base.png?_=20230619.144114") center center/contain no-repeat
}

html.webp .inidac-subheading {
    background: url("/inidac/$site/components/inidac-subheading/h2_base.png.webp?_=20230619.144114") center center/contain no-repeat
}

@media screen and (min-width: 601px) {
    .inidac-subheading {
        width: 400px;
        height: 80px;
        font-size: 30px
    }
}

@media screen and (max-width: 600px) {
    .inidac-subheading {
        width: 300px;
        height: 60px;
        font-size: 24px
    }
}

.inidac-subheading>div {
    transform: skew(-10deg)
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

@media screen and (max-width: 600px) {
    .inidac-text {
        position: relative;
        width: 400px;
        margin: 0 -1rem 1rem;
        overflow: hidden;
        font-style: normal
    }

    .inidac-text::before,
    .inidac-text::after {
        content: "";
        position: relative;
        display: block;
        width: calc(100% + 1.4rem);
        height: 4rem;
        background-color: #f2f2f2;
        box-shadow: inset 0 0 0 3px #111, inset 0 0 0 5px #f2f2f2, inset 0 0 0 8px #111;
        transform: skewX(-20deg)
    }

    .inidac-text::before {
        left: -.7rem;
        transform-origin: bottom left
    }

    .inidac-text::after {
        left: -.7rem;
        margin-bottom: 10px;
        transform-origin: top left
    }

    .inidac-text--outer {
        position: relative;
        z-index: 1;
        width: 100%;
        margin: -10px 0;
        padding: 1rem 2rem;
        background-color: #f2f2f2;
        color: #111
    }

    .inidac-text--shadow {
        position: absolute;
        left: 4px;
        bottom: 3px;
        width: 100%;
        height: 4rem;
        background-color: #111;
        transform: skewX(-20deg)
    }

    .inidac-text--inner {
        margin: -3rem 0;
        font-weight: bold;
    }
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.inidac-tips {
    width: 100%;
    height: 0;
    padding-bottom: 42.25352%;
    background: center center / contain no-repeat;
    color: #222;
    font-size: 1.2vw
}

html.no-webp .inidac-tips {
    background-image: url("/inidac/$site/components/inidac-tips/tips_bg@pc.png?_=20230619.144114")
}

html.webp .inidac-tips {
    background-image: url("/inidac/$site/components/inidac-tips/tips_bg@pc.png.webp?_=20230619.144114")
}

.inidac-tips--inner {
    width: 100%;
    height: 100%;
    padding-top: 10%;
    padding-right: 20%;
    padding-bottom: 22%;
    padding-left: 10%;
    overflow: hidden
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.MyFavorite {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

@media screen and (min-width: 601px) {
    .MyFavorite {
        width: 4rem;
        height: 4rem
    }
}

@media screen and (max-width: 600px) {
    .MyFavorite {
        width: 3rem;
        height: 3rem
    }
}

.MyFavorite>i {
    display: block;
    width: 1em;
    height: 1em;
    color: transparent;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

html.no-webp .MyFavorite>i {
    background: url("/inidac/$site/components/MyFavorite/fav_icon_on.png?_=20230619.144114") center center/contain no-repeat
}

html.webp .MyFavorite>i {
    background: url("/inidac/$site/components/MyFavorite/fav_icon_on.png.webp?_=20230619.144114") center center/contain no-repeat
}

@media screen and (min-width: 601px) {
    .MyFavorite>i {
        font-size: 3rem
    }
}

@media screen and (max-width: 600px) {
    .MyFavorite>i {
        font-size: 2rem
    }
}

@media screen and (min-width: 601px) {
    .MyFavorite>span {
        font-size: 0.75rem
    }
}

@media screen and (max-width: 600px) {
    .MyFavorite>span {
        font-size: 0.66rem
    }
}

.MyFavorite>span {
    color: #f2f2f2;
    text-shadow: 0 0 1px #111, 0 0 1px #111
}

.MyFavorite.active {
    filter: none
}

.MyFavorite:not(.active) {
    filter: grayscale(100%) opacity(0.5)
}

.MyFavorite {
    transition: 150ms cubic-bezier(0.175, 0.3, 0.6, 2.5)
}

.MyFavorite:hover {
    transform: scale(1.1)
}

.MyFavorite:active {
    transform: scale(0.9);
    filter: none;
    transition: 0ms
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.uiButton {
    width: 100%;
    min-width: 2rem;
    min-height: 2rem;
    padding: .2rem 0.5rem;
    border: 1px solid #111;
    border-radius: 0.25rem;
    background-color: #f2f2f2;
    font-size: 0.9rem;
    line-height: 1;
    vertical-align: middle;
    cursor: default
}

.uiButton--checkbox {
    position: relative;
    z-index: 102 !important;
    width: 8rem;
    height: 2.4rem;
    margin-right: 0.5rem;
    font-size: 1rem;
    line-height: 1;
    box-shadow: 0.5rem 0.5rem 0 0 #111;
    transform: skewX(-20deg)
}

.uiButton--checkbox:not(.active):hover {
    filter: brightness(110%);
    cursor: pointer
}

.uiButton--checkboxWrap {
    position: relative
}

@media screen and (min-width: 601px) {
    .uiButton--checkboxWrap {
        left: 520px;
        right: 0
    }
}

@media screen and (max-width: 600px) {
    .uiButton--checkboxWrap {
        margin: 1rem 0;
        text-align: center
    }
}

.uiButton--buttonback {
    position: relative;
    height: 2.4rem;
    padding: 0 2rem;
    background-color: #f2f2f2;
    color: #111;
    box-shadow: inset 0 0 0 3px #f2f2f2, inset 0 0 0 6px #111
}

.uiButton--buttonback:not(.active):hover {
    filter: brightness(110%);
    cursor: pointer
}

.uiButton.short {
    width: auto
}

.uiButton--text {
    display: inline-block;
    transition: 300ms
}

.uiButton--text.checkbox {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    transform: skewX(10deg)
}

.uiButton--text.reverse {
    transform: rotate(180deg)
}

.uiButton:disabled {
    filter: contrast(0.3) brightness(120%)
}

.uiButton,
.uiButton:not(:disabled):hover {
    box-shadow: inset 0 .25rem .25rem -.25rem #fff, inset 0 -.25rem .25rem -.25rem #000
}

.uiButton.active {
    box-shadow: inset 0 .25rem .25rem -.25rem #000, inset 0 -.25rem .25rem -.25rem #fff
}

.uiButton:not(:disabled):active {
    box-shadow: inset 0 .125rem .125rem -.125rem #000, inset 0 -.125rem .125rem -.125rem #fff
}

.uiButton {
    background-color: #f2f2f2;
    color: #111
}

.uiButton.inactive {
    background-color: #f2f2f2;
    color: #666
}

.uiButton.active {
    background-color: #111;
    color: #ddd
}

.uiButton:not(:disabled):not(.active):hover {
    filter: brightness(110%);
    cursor: pointer
}

.uiButton:not(:disabled):not(.active):active {
    padding-top: .4rem;
    padding-bottom: 0;
    background-color: #ddd;
    color: #666
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.uiButtonGroup {
    display: inline-flex;
    vertical-align: middle
}

.uiButtonGroup>.uiButton:not(:last-child) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.uiButtonGroup>.uiButton:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.uiCheckboxSquare {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0 1rem;
    font-size: 0.9rem;
    line-height: 1;
    vertical-align: middle;
    cursor: default
}

.uiCheckboxSquare,
.uiCheckboxSquare:hover {
    box-shadow: inset 0 0 0 2px #111, inset 0 0 0 4px #f2f2f2
}

.uiCheckboxSquare {
    background-color: #111;
    color: #f2f2f2
}

.uiCheckboxSquare.checked {
    background-color: #f80;
    color: #111;
    box-shadow: inset 0 0 0 2px #111
}

.uiCheckboxSquare.active {
    background-color: #111;
    color: #ddd
}

.uiCheckboxSquare:not(.active):hover {
    filter: brightness(110%);
    cursor: pointer
}

.uiCheckboxSquare:not(.active):active {
    background-color: #ddd;
    color: #666
}

.uiCheckboxSkew {
    position: relative;
    z-index: 10;
    font-size: 1rem;
    line-height: 1;
    transform: skewX(-20deg)
}

.uiCheckboxSkew:not(.checked) {
    box-shadow: 0.5rem 0.5rem 0 0 #111
}

.uiCheckboxSkew.checked {
    box-shadow: 0.5rem 0.5rem 0 0 #111
}

.uiCheckboxSkew--border {
    position: relative;
    height: 3rem;
    padding: 0 2rem
}

.uiCheckboxSkew--border.checked {
    background-image: linear-gradient(to bottom, #111 35%, #666 48%, #666 52%, #111 58%);
    color: #f2f2f2;
    box-shadow: inset 0 0 0 3px #111, inset 0 0 0 6px #f2f2f2
}

.uiCheckboxSkew--border:not(.checked) {
    background-color: #f2f2f2;
    color: #111;
    box-shadow: inset 0 0 0 3px #f2f2f2, inset 0 0 0 6px #111
}

.uiCheckboxSkew--color {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 0.75rem;
    height: calc(100% - 6px * 2)
}

.uiCheckboxSkew--text {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-weight: bold;
    transform: skewX(10deg)
}

.uiCheckboxSkew--text[data-length="12"] {
    transform: scaleX(0.9)
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.uiLineInput {
    display: flex;
    width: 100%;
    height: 2rem;
    margin: 0.5rem 0
}

.uiLineInput--input {
    width: 100%;
    padding: 0 0.5em;
    border: 2px solid #111;
    background-color: #f8f8f8;
    color: #111
}

.uiLineInput--button {
    border-left: 0;
    border-radius: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.uiSelect {
    box-shadow: inset 0 0 0 1px #111, inset 0 0 0 3px #f2f2f2, inset 0 .5rem .5rem -.5rem #fff, inset 0 -.5rem .5rem -.5rem #fff;
    position: relative;
    display: inline-block;
    height: 2rem;
    background-color: #111;
    color: #f2f2f2;
    vertical-align: middle
}

.uiSelect--button {
    position: absolute;
    top: 2px;
    right: 2px;
    display: block;
    width: calc(2rem - 4px);
    height: calc(2rem - 4px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background-color: #f2f2f2;
    color: #111;
    font-size: 0.9rem;
    box-shadow: none;
    pointer-events: none
}

.uiSelect:focus,
.uiSelect:hover {
    filter: brightness(110%)
}

.uiSelect--text {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 0.5rem;
    padding-right: 2.5rem;
    pointer-events: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.uiSelect--select {
    display: block;
    width: 160px;
    height: 100%;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    background-color: #111;
    color: #fff;
    opacity: 0
}

.uiSelect--select:focus {
    opacity: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-breadcrumb--list {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
    font-family: "Consolas", "Menlo", monospace
}

.el-breadcrumb--item {
    display: inline-block
}

.el-breadcrumb--item:nth-child(n+2)::before {
    content: "/";
    margin: 0 0.2em;
    color: #666
}

.el-breadcrumb--link,
.el-breadcrumb--link:active {
    color: #007bff
}

.el-breadcrumb--link:hover {
    text-decoration: underline;
    color: #0062cc
}

.el-breadcrumb--active {
    color: #6c757d
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.vanilla-carousel .el-carousel--view {
    width: 100%;
    height: 450px;
    background-color: #111;
    border: 1px inset #444
}

.vanilla-carousel .el-carousel--view-nav {
    width: 25%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
    transition: 300ms
}

@media screen and (max-width: 600px) {
    .vanilla-carousel .el-carousel--view-nav {
        width: 40%
    }
}

.vanilla-carousel .el-carousel--ctrls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px 0
}

.vanilla-carousel .el-carousel--nav {
    margin: 0 20px
}

.vanilla-carousel .el-carousel--index {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 10px;
    background-color: #bbb;
    border-radius: 50%;
    transition: 300ms;
    transform: scale(1);
    color: transparent
}

.vanilla-carousel .el-carousel--index.active {
    background-color: #666;
    transform: scale(1.6)
}

.el-carousel {
    width: 100%
}

.el-carousel--view {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden
}

.el-carousel--view-nav {
    position: absolute;
    z-index: 100
}

.el-carousel--view-nav.prev {
    left: 0
}

.el-carousel--view-nav.next {
    right: 0
}

.el-carousel--view-nav {
    opacity: 0
}

@media screen and (min-width: 601px) {
    :not(.swipe)>.el-carousel--view-nav:hover {
        opacity: 1
    }
}

.el-carousel--item {
    position: absolute;
    width: 100%;
    height: 100%
}

.el-carousel--item-content {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.25);
    font-size: 4rem;
    letter-spacing: 0.25em;
    font-weight: 100
}

.el-carousel--item-content.youtube {
    pointer-events: none
}

.el-carousel--ctrls {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.el-carousel--index {
    display: inline-block
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-dialog--wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 949;
    display: flex;
    justify-content: center;
    align-items: center
}

.el-dialog--shade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

.el-dialog--window {
    position: absolute;
    z-index: 1;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    background-color: #fff;
    box-shadow: 0 1em 2em rgba(51, 51, 51, 0.5)
}

.el-dialog--content:not(.noframe) {
    display: inline-block;
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll
}

.el-dialog--content:not(.noframe)::-webkit-scrollbar {
    width: 10px;
    background-color: #fff
}

.el-dialog--content:not(.noframe)::-webkit-scrollbar-thumb {
    background-color: #4d4d4d
}

.el-dialog--close {
    position: absolute;
    z-index: 2
}

.z-shade-dark-root-object {
    background-color: rgba(51, 51, 51, 0.88)
}

.z-shade-dark-enter-active {
    transition: 300ms
}

.z-shade-dark-leave-active {
    transition: 300ms 100ms
}

.z-shade-dark-enter,
.z-shade-dark-leave-to {
    opacity: 0
}

.z-shade-light-root-object {
    background-color: rgba(242, 242, 242, 0.75)
}

.z-shade-light-enter-active {
    transition: 300ms
}

.z-shade-light-leave-active {
    transition: 300ms 100ms
}

.z-shade-light-enter,
.z-shade-light-leave-to {
    opacity: 0
}

.z-shade-dark-slowly-root-object {
    background-color: rgba(51, 51, 51, 0.88)
}

.z-shade-dark-slowly-enter-active {
    transition: 800ms
}

.z-shade-dark-slowly-leave-active {
    transition: 800ms 100ms
}

.z-shade-dark-slowly-enter,
.z-shade-dark-slowly-leave-to {
    opacity: 0
}

.z-shade-light-slowly-root-object {
    background-color: rgba(242, 242, 242, 0.75)
}

.z-shade-light-slowly-enter-active {
    transition: 800ms
}

.z-shade-light-slowly-leave-active {
    transition: 800ms 100ms
}

.z-shade-light-slowly-enter,
.z-shade-light-slowly-leave-to {
    opacity: 0
}

.z-shade-dark-rich-from-left-root-object {
    left: -200vw;
    width: 600vw;
    background: linear-gradient(to right, transparent 0vw, transparent 100vw, rgba(26, 26, 26, 0.88) 200vw, rgba(26, 26, 26, 0.88) 300vw, transparent 400vw, transparent 500vw)
}

.z-shade-dark-rich-from-left-enter-active,
.z-shade-dark-rich-from-left-leave-active {
    transition: 800ms
}

.z-shade-dark-rich-from-left-leave-active {
    transition-delay: 200ms
}

.z-shade-dark-rich-from-left-enter {
    transform: translateX(-200vw)
}

.z-shade-dark-rich-from-left-leave-to {
    transform: translateX(200vw)
}

.z-shade-dark-rich-from-top-root-object {
    top: -200vh;
    height: 600vh;
    background: linear-gradient(to bottom, transparent 0vh, transparent 100vh, rgba(26, 26, 26, 0.88) 200vh, rgba(26, 26, 26, 0.88) 300vh, transparent 400vh, transparent 500vh)
}

.z-shade-dark-rich-from-top-enter-active,
.z-shade-dark-rich-from-top-leave-active {
    transition: 800ms
}

.z-shade-dark-rich-from-top-leave-active {
    transition-delay: 200ms
}

.z-shade-dark-rich-from-top-enter {
    transform: translateY(-200vh)
}

.z-shade-dark-rich-from-top-leave-to {
    transform: translateY(200vh)
}

.z-shade-dark-stripe-root-object {
    left: -200vw;
    width: 600vw;
    background-size: auto auto;
    background-color: #222;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, #333 7px, #333 16px);
    background-attachment: fixed
}

.z-shade-dark-stripe-enter-active,
.z-shade-dark-stripe-leave-active {
    transition: 800ms
}

.z-shade-dark-stripe-enter {
    opacity: 0
}

.z-shade-dark-stripe-leave-to {
    opacity: 0
}

@keyframes z-dialog-fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.z-dialog-fade-enter-active,
.z-dialog-fade-leave-active {
    transition: 300ms ease-in
}

.z-dialog-fade-enter,
.z-dialog-fade-leave-to {
    opacity: 0
}

.z-dialog-down-enter-active,
.z-dialog-down-leave-active {
    transition: 400ms ease-in
}

.z-dialog-down-enter {
    transform: translateY(-1em);
    opacity: 0
}

.z-dialog-down-leave-to {
    transform: translateY(1em);
    opacity: 0
}

.z-dialog-zoom-in-enter-active,
.z-dialog-zoom-in-leave-active {
    transition: 500ms ease-in
}

.z-dialog-zoom-in-enter {
    transform: scale(1.12);
    opacity: 0
}

.z-dialog-zoom-in-leave-to {
    transform: scale(0.95);
    opacity: 0
}

.z-dialog-zoom-out-enter-active,
.z-dialog-zoom-out-leave-active {
    transition: 500ms ease-in
}

.z-dialog-zoom-out-enter {
    transform: scale(0.95);
    opacity: 0
}

.z-dialog-zoom-out-leave-to {
    transform: scale(1.12);
    opacity: 0
}

.z-dialog-rotate-root-object {
    perspective: 500px
}

.z-dialog-rotate-enter-active {
    transition: 600ms ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.z-dialog-rotate-leave-active {
    transition: 300ms ease-in;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.z-dialog-rotate-enter {
    transform: rotateY(90deg);
    opacity: 0
}

.z-dialog-rotate-leave-to {
    transform: rotateY(-90deg);
    opacity: 0
}

.z-dialog-bounce-enter-active,
.z-dialog-bounce-leave-active {
    animation: z-dialog-bounce 600ms linear
}

.z-dialog-bounce-leave-active {
    animation-direction: reverse
}

@keyframes z-dialog-bounce {
    0% {
        transform: scale(1.5);
        opacity: 0
    }

    40% {
        transform: scale(1);
        opacity: 1
    }

    55% {
        transform: scale(1.1)
    }

    70% {
        transform: scale(1)
    }

    85% {
        transform: scale(1.05)
    }

    100% {
        transform: scale(1)
    }
}

.z-dialog-bounce-hard-enter-active,
.z-dialog-bounce-hard-leave-active {
    animation: z-dialog-bounce-hard 1400ms ease-in
}

.z-dialog-bounce-hard-leave-active {
    animation-direction: reverse
}

@keyframes z-dialog-bounce-hard {
    0% {
        transform: scale(1.6);
        opacity: 0
    }

    35% {
        transform: scale(1.8)
    }

    50% {
        transform: scale(1)
    }

    60% {
        transform: scale(1.3)
    }

    72% {
        transform: scale(1);
        opacity: 1
    }

    81% {
        transform: scale(1.15)
    }

    85% {
        transform: scale(1)
    }

    88% {
        transform: scale(1.08)
    }

    91% {
        transform: scale(1)
    }

    94% {
        transform: scale(1.05)
    }

    96% {
        transform: scale(1)
    }

    98% {
        transform: scale(1.03)
    }

    100% {
        transform: scale(1)
    }
}

.z-dialog-feather-fall-enter-active,
.z-dialog-feather-fall-leave-active {
    transition: 600ms cubic-bezier(0.08, 0.43, 0.52, 1.21)
}

.z-dialog-feather-fall-enter,
.z-dialog-feather-fall-leave-to {
    opacity: 0;
    transform: scale(1.25)
}

.z-dialog-paper-fall-root-object {
    perspective: 2000px
}

.z-dialog-paper-fall-enter-active,
.z-dialog-paper-fall-leave-active {
    animation: z-dialog-paper-fall 3000ms cubic-bezier(0.43, 0.17, 0.71, 0.97)
}

.z-dialog-paper-fall-leave-active {
    animation-direction: reverse
}

@keyframes z-dialog-paper-fall {
    0% {
        transform: translateZ(250px) rotateY(-45deg) translateX(0px);
        filter: brightness(105%);
        opacity: 0
    }

    25% {
        transform: translateZ(85px) rotateY(20deg) translateX(-200px);
        filter: brightness(90%);
        opacity: 1
    }

    50% {
        transform: translateZ(40px) rotateY(-10deg) translateX(150px);
        filter: brightness(104%)
    }

    75% {
        transform: translateZ(10px) rotateY(3deg) translateX(-25px);
        filter: brightness(98%)
    }

    100% {
        transform: translateZ(0px) rotateY(0deg) translateX(0px);
        filter: brightness(100%)
    }
}

.z-dialog-shaking-enter-active,
.z-dialog-shaking-leave-active {
    animation: z-dialog-shaking 1000ms, z-dialog-fade 1000ms
}

.z-dialog-shaking-leave-active {
    animation-direction: reverse
}

@keyframes z-dialog-shaking {
    0% {
        transform: translateX(-20px);
        filter: blur(2px)
    }

    5% {
        transform: translateX(19px);
        filter: blur(1.9px)
    }

    10% {
        transform: translateX(-18px);
        filter: blur(1.8px)
    }

    15% {
        transform: translateX(17px);
        filter: blur(1.7px)
    }

    20% {
        transform: translateX(-16px);
        filter: blur(1.6px)
    }

    25% {
        transform: translateX(15px);
        filter: blur(1.5px)
    }

    30% {
        transform: translateX(-14px);
        filter: blur(1.4px)
    }

    35% {
        transform: translateX(13px);
        filter: blur(1.3px)
    }

    40% {
        transform: translateX(-12px);
        filter: blur(1.2px)
    }

    45% {
        transform: translateX(11px);
        filter: blur(1.1px)
    }

    50% {
        transform: translateX(-10px);
        filter: blur(1px)
    }

    55% {
        transform: translateX(9px);
        filter: blur(.9px)
    }

    60% {
        transform: translateX(-8px);
        filter: blur(.8px)
    }

    65% {
        transform: translateX(7px);
        filter: blur(.7px)
    }

    70% {
        transform: translateX(-6px);
        filter: blur(.6px)
    }

    75% {
        transform: translateX(5px);
        filter: blur(.5px)
    }

    80% {
        transform: translateX(-4px);
        filter: blur(.4px)
    }

    85% {
        transform: translateX(3px);
        filter: blur(.3px)
    }

    90% {
        transform: translateX(-2px);
        filter: blur(.2px)
    }

    95% {
        transform: translateX(1px);
        filter: blur(.1px)
    }
}

.z-dialog-board-fall-root-object {
    perspective: 2000px
}

.z-dialog-board-fall-enter-active,
.z-dialog-board-fall-leave-active {
    animation: z-dialog-board-fall 1200ms cubic-bezier(0.99, 0.12, 1, 0.71);
    transform-origin: 50% 0%
}

.z-dialog-board-fall-leave-active {
    animation-direction: reverse
}

@keyframes z-dialog-board-fall {
    0% {
        transform: rotateX(85deg);
        opacity: 0
    }

    70% {
        transform: rotateX(0deg);
        opacity: 1
    }

    80% {
        transform: rotateX(10deg)
    }

    88% {
        transform: rotateX(0deg)
    }

    96% {
        transform: rotateX(2deg)
    }

    100% {
        transform: rotateX(0deg)
    }
}

.z-dialog-from-near-root-object {
    perspective: 2000px
}

.z-dialog-from-near-enter-active,
.z-dialog-from-near-leave-active {
    transition: 1200ms ease-in
}

.z-dialog-from-near-enter,
.z-dialog-from-near-leave-to {
    transform: translateZ(500px) rotateY(360deg);
    opacity: 0
}

.z-dialog-from-far-root-object {
    perspective: 2000px
}

.z-dialog-from-far-enter-active,
.z-dialog-from-far-leave-active {
    transition: 1200ms ease-in
}

.z-dialog-from-far-enter,
.z-dialog-from-far-leave-to {
    transform: translateZ(-500px) rotateY(-360deg);
    opacity: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-img {
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: auto
}

.el-img[data-fit=fit] img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.el-img[data-fit='hors'],
.el-img[data-fit='vert'] {
    display: inline-flex;
    justify-content: center;
    align-items: center
}

.el-img[data-fit='hors'] img {
    width: 100%
}

.el-img[data-fit='vert'] img {
    height: 100%
}

.stone-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff
}

.stone-circle--item {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 0;
    height: 0;
    border: 16px solid;
    margin: -16px 0 0 -16px;
    border-radius: 50%
}

.stone-circle--item:nth-child(1) {
    animation: stone-circle--item1 1s 0s infinite both
}

@keyframes stone-circle--item1 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(45deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(45deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(45deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(45deg) translateX(50px) scale(1)
    }
}

.stone-circle--item:nth-child(2) {
    animation: stone-circle--item2 1s .125s infinite both
}

@keyframes stone-circle--item2 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(90deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(90deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(90deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(90deg) translateX(50px) scale(1)
    }
}

.stone-circle--item:nth-child(3) {
    animation: stone-circle--item3 1s .25s infinite both
}

@keyframes stone-circle--item3 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(135deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(135deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(135deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(135deg) translateX(50px) scale(1)
    }
}

.stone-circle--item:nth-child(4) {
    animation: stone-circle--item4 1s .375s infinite both
}

@keyframes stone-circle--item4 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(180deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(180deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(180deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(180deg) translateX(50px) scale(1)
    }
}

.stone-circle--item:nth-child(5) {
    animation: stone-circle--item5 1s .5s infinite both
}

@keyframes stone-circle--item5 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(225deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(225deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(225deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(225deg) translateX(50px) scale(1)
    }
}

.stone-circle--item:nth-child(6) {
    animation: stone-circle--item6 1s .625s infinite both
}

@keyframes stone-circle--item6 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(270deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(270deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(270deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(270deg) translateX(50px) scale(1)
    }
}

.stone-circle--item:nth-child(7) {
    animation: stone-circle--item7 1s .75s infinite both
}

@keyframes stone-circle--item7 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(315deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(315deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(315deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(315deg) translateX(50px) scale(1)
    }
}

.stone-circle--item:nth-child(8) {
    animation: stone-circle--item8 1s .875s infinite both
}

@keyframes stone-circle--item8 {
    0% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(360deg) translateX(50px) scale(1)
    }

    50% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(360deg) translateX(50px) scale(1)
    }

    60% {
        border-color: rgba(136, 136, 136, 0.5);
        transform: rotate(360deg) translateX(40px) scale(.7)
    }

    100% {
        border-color: rgba(136, 136, 136, 0.1);
        transform: rotate(360deg) translateX(50px) scale(1)
    }
}

.stone-circle-enter-active,
.stone-circle-leave-active {
    transition: 300ms
}

.stone-circle-enter,
.stone-circle-leave-to {
    opacity: 0
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-scroll-anime--item {
    animation-fill-mode: both
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-sns {
    display: inline-block
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-twitter-timeline {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 2px solid #444
}

.el-twitter-timeline::-webkit-scrollbar {
    width: 4px;
    background-color: #ccc
}

.el-twitter-timeline::-webkit-scrollbar-thumb {
    background-color: #444
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-video {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    background-color: #000;
    padding-bottom: 56.25%
}

.el-video--screen {
    position: absolute;
    width: 100%;
    height: 100%
}

.el-video[data-status="paused"] .el-video--screen {
    opacity: 0.8
}

.el-video[data-status="interval"] .el-video--screen {
    opacity: 0.8
}

.el-video--bar {
    position: relative;
    display: block;
    width: 100%;
    height: 4px
}

.el-video--bar-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #cc6;
    transition: color 500ms
}

.el-video.paused .el-video--bar-progress {
    background-color: #d65c5c
}

.el-video.interval .el-video--bar-progress {
    background-color: #5c85d6
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-visible:not([data-show]) {
    visibility: hidden;
    animation: none !important
}

.el-visible:not([data-show]) * {
    animation: none !important
}

.el-visible[data-show] {
    visibility: visible
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.el-youtube iframe {
    width: 100%;
    height: 100%
}

.el-youtube.normal {
    background-color: #111;
    width: 100%;
    height: 100%
}

.el-youtube.pcimage {
    display: inline-block;
    width: 100%;
    height: 100%
}

.el-youtube.pcimage .el-dialog--open {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.el-youtube.pcimage .el-dialog--window {
    display: block;
    width: 1200px;
    height: 675px
}

.el-youtube.pcimage .el-dialog--content {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.el-youtube.spimage {
    outline: 2px solid green
}

.el-youtube-adap--image {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #000
}

.el-youtube-dialog {
    width: 100%;
    height: 100%
}

@keyframes from-left {
    0% {
        opacity: 0;
        transform: translate(-400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-right {
    0% {
        opacity: 0;
        transform: translate(400px, 0)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-bottom {
    0% {
        opacity: 0;
        transform: translate(0, 60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-top {
    0% {
        opacity: 0;
        transform: translate(0, -60px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@keyframes from-left-far {
    0% {
        opacity: 0;
        transform: translate(-800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-right-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(800px, 0px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-bottom-far {
    0% {
        opacity: 0;
        transform: scale(2);
        transform: translate(0px, 800px)
    }

    60% {
        opacity: 1;
        transform: translate(0px, 0px)
    }
}

@keyframes from-zoom-bounce {
    0% {
        opacity: 0;
        transform: scale(2)
    }

    20% {
        opacity: 0;
        transform: scale(2)
    }

    60% {
        opacity: 1;
        transform: scale(1)
    }

    65% {
        transform: scale(1.05)
    }

    70% {
        transform: scale(1)
    }

    75% {
        transform: scale(1.05)
    }

    80% {
        transform: scale(1)
    }
}

.anime-fast {
    animation-duration: 500ms
}

.anime-slow {
    animation-duration: 1200ms
}

.anime-back {
    animation-timing-function: cubic-bezier(0.5, 1.44, 0.88, 1.3)
}

.anime-from-zoom-bounce {
    animation-name: from-zoom-bounce
}

.anime-from-top {
    animation-name: from-top
}

.anime-from-left {
    animation-name: from-left
}

.anime-from-right {
    animation-name: from-right
}

.anime-from-bottom {
    animation-name: from-bottom
}

.anime-from-zoom {
    animation-name: from-zoom
}

.anime-from-left-far {
    animation-name: from-left-far
}

.anime-from-right-far {
    animation-name: from-right-far
}

.anime-from-bottom-far {
    animation-name: from-bottom-far
}

.v-swish--char {
    display: inline-block;
    white-space: pre-wrap;
    pointer-events: none
}

.z-anim-fade-huge-zoom {
    animation: z-anim-fade-huge-zoom 500ms both
}

@keyframes z-anim-fade-huge-zoom {
    0% {
        transform: scale(8);
        opacity: 0
    }

    50% {
        opacity: 0.1
    }

    80% {
        transform: scale(1.25);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.z-anim-fade-slow-zoom {
    animation: z-anim-fade-slow-zoom 500ms both
}

@keyframes z-anim-fade-slow-zoom {
    0% {
        transform: scale(4);
        opacity: 0
    }

    50% {
        transform: scale(3.8);
        opacity: 1
    }

    90% {
        transform: scale(0.9);
        opacity: 1
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

.z-anim-fade {
    animation: z-anim-fade 500ms both
}

@keyframes z-anim-fade {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.z-anim-from-left {
    animation: z-anim-from-left 500ms both
}

@keyframes z-anim-from-left {
    0% {
        transform: translateX(-1em) scale(0);
        opacity: 0.0
    }

    70% {
        transform: translateX(0em) scale(1);
        opacity: 1.0
    }

    75% {
        transform: translateX(0.2em) scale(1);
        opacity: 0.4
    }

    80% {
        transform: translateX(0em) scale(1);
        opacity: 1.0
    }

    85% {
        transform: translateX(0.1em) scale(1);
        opacity: 0.6
    }

    90% {
        transform: translateX(0em) scale(1);
        opacity: 1.0
    }

    95% {
        transform: translateX(0.05em) scale(1);
        opacity: 0.8
    }

    100% {
        transform: translateX(0em) scale(1);
        opacity: 1.0
    }
}

.z-anim-from-right {
    animation: z-anim-from-right 500ms both
}

@keyframes z-anim-from-right {
    0% {
        transform: translateX(10em) scale(2, 0);
        opacity: 0.0
    }

    84% {
        transform: translateX(-0.1em) scale(1.1, 0.8);
        opacity: 1.0
    }

    100% {
        transform: translateX(0em) scale(1, 1);
        opacity: 1.0
    }
}

.z-anim-from-top {
    animation: z-anim-from-top 500ms both
}

@keyframes z-anim-from-top {
    0% {
        transform: translateY(-10em) scale(0);
        opacity: 0.0
    }

    70% {
        transform: translateY(0em) scale(0.4);
        opacity: 1.0
    }

    75% {
        transform: translateY(0.2em) scale(0.5);
        opacity: 0.4
    }

    80% {
        transform: translateY(0em) scale(0.6);
        opacity: 1.0
    }

    85% {
        transform: translateY(0.1em) scale(0.7);
        opacity: 0.6
    }

    90% {
        transform: translateY(0em) scale(0.8);
        opacity: 1.0
    }

    95% {
        transform: translateY(0.05em) scale(0.9);
        opacity: 0.8
    }

    100% {
        transform: translateY(0em) scale(1);
        opacity: 1.0
    }
}

.z-anim-random {
    animation: z-anim-random 500ms both
}

@keyframes z-anim-random {
    0% {
        transform: scale(3);
        opacity: 0;
        text-shadow: 0 0 8em
    }

    80% {
        transform: scale(2.8);
        opacity: 0.1;
        text-shadow: 0 0 0em
    }

    97% {
        transform: scale(0.9);
        opacity: 1;
        top: 0;
        left: 0
    }

    100% {
        transform: scale(1);
        opacity: 1;
        top: 0;
        left: 0
    }
}

.z-anim-random:nth-child(20n+1) {
    top: .05875em;
    left: -.21422em
}

.z-anim-random:nth-child(20n+2) {
    top: .34826em;
    left: -1.65828em
}

.z-anim-random:nth-child(20n+3) {
    top: -1.22504em;
    left: 1.12404em
}

.z-anim-random:nth-child(20n+4) {
    top: .1348em;
    left: .07677em
}

.z-anim-random:nth-child(20n+5) {
    top: -.95305em;
    left: -.55906em
}

.z-anim-random:nth-child(20n+6) {
    top: .01611em;
    left: .38641em
}

.z-anim-random:nth-child(20n+7) {
    top: 1.82268em;
    left: -.54856em
}

.z-anim-random:nth-child(20n+8) {
    top: 1.12344em;
    left: -.58976em
}

.z-anim-random:nth-child(20n+9) {
    top: -.58898em;
    left: -1.1646em
}

.z-anim-random:nth-child(20n+10) {
    top: 1.07149em;
    left: .80513em
}

.z-anim-random:nth-child(20n+11) {
    top: .58791em;
    left: .82146em
}

.z-anim-random:nth-child(20n+12) {
    top: -1.15406em;
    left: -.62121em
}

.z-anim-random:nth-child(20n+13) {
    top: -.09175em;
    left: -1.08469em
}

.z-anim-random:nth-child(20n+14) {
    top: .02957em;
    left: -.7503em
}

.z-anim-random:nth-child(20n+15) {
    top: -.06602em;
    left: -1.13087em
}

.z-anim-random:nth-child(20n+16) {
    top: .55326em;
    left: .45883em
}

.z-anim-random:nth-child(20n+17) {
    top: .39091em;
    left: 1.00663em
}

.z-anim-random:nth-child(20n+18) {
    top: .33657em;
    left: .05486em
}

.z-anim-random:nth-child(20n+19) {
    top: -.36492em;
    left: .77243em
}

.z-anim-random-strong {
    animation: z-anim-random-strong 500ms both
}

@keyframes z-anim-random-strong {
    0% {
        transform: scale(8);
        opacity: 0
    }

    80% {
        transform: scale(7);
        opacity: 0.2
    }

    90% {
        transform: scale(1.25);
        opacity: 1;
        top: 0;
        left: 0
    }

    100% {
        transform: scale(1);
        opacity: 1;
        top: 0;
        left: 0
    }
}

.z-anim-random-strong:nth-child(20n+1) {
    top: 7.16899em;
    left: -.28999em
}

.z-anim-random-strong:nth-child(20n+2) {
    top: -3.8981em;
    left: 3.32201em
}

.z-anim-random-strong:nth-child(20n+3) {
    top: -.40473em;
    left: 1.49797em
}

.z-anim-random-strong:nth-child(20n+4) {
    top: -2.81175em;
    left: -3.46639em
}

.z-anim-random-strong:nth-child(20n+5) {
    top: -.55896em;
    left: 7.07703em
}

.z-anim-random-strong:nth-child(20n+6) {
    top: 3.96516em;
    left: 3.7335em
}

.z-anim-random-strong:nth-child(20n+7) {
    top: -.72024em;
    left: 3.39832em
}

.z-anim-random-strong:nth-child(20n+8) {
    top: -4.94327em;
    left: -1.08416em
}

.z-anim-random-strong:nth-child(20n+9) {
    top: -2.62428em;
    left: -8.40365em
}

.z-anim-random-strong:nth-child(20n+10) {
    top: -8.04661em;
    left: -7.0865em
}

.z-anim-random-strong:nth-child(20n+11) {
    top: .29092em;
    left: 3.93122em
}

.z-anim-random-strong:nth-child(20n+12) {
    top: -5.2201em;
    left: -2.32797em
}

.z-anim-random-strong:nth-child(20n+13) {
    top: -5.11259em;
    left: -4.39606em
}

.z-anim-random-strong:nth-child(20n+14) {
    top: -4.94999em;
    left: .51661em
}

.z-anim-random-strong:nth-child(20n+15) {
    top: 1.11472em;
    left: .9957em
}

.z-anim-random-strong:nth-child(20n+16) {
    top: -3.44976em;
    left: .63072em
}

.z-anim-random-strong:nth-child(20n+17) {
    top: -.50751em;
    left: -3.7847em
}

.z-anim-random-strong:nth-child(20n+18) {
    top: -.40251em;
    left: -2.91001em
}

.z-anim-random-strong:nth-child(20n+19) {
    top: 2.4785em;
    left: 2.98916em
}

.z-anim-shake {
    animation: z-anim-shake 500ms both
}

@keyframes z-anim-shake {
    0% {
        transform: scale(3);
        opacity: 0
    }

    60% {
        transform: scale(1.2);
        opacity: 1
    }

    65% {
        transform: scale(1.5)
    }

    70% {
        transform: scale(1.1)
    }

    75% {
        transform: scale(1.4)
    }

    80% {
        transform: scale(1)
    }

    85% {
        transform: scale(1.2)
    }

    90% {
        transform: scale(0.9)
    }

    95% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

.z-anim-slimy {
    animation: z-anim-slimy 500ms both
}

@keyframes z-anim-slimy {
    0% {
        transform: translateY(0em) scale(1, 1.6);
        opacity: 0
    }

    20% {
        transform: translateY(0.2em) scale(1.2, 1);
        opacity: 1
    }

    40% {
        transform: translateY(-0.2em) scale(1, 1.3);
        opacity: 1
    }

    60% {
        transform: translateY(0.1em) scale(1.1, 1);
        opacity: 1
    }

    80% {
        transform: translateY(-0.1em) scale(1, 1.1);
        opacity: 1
    }

    100% {
        transform: translateY(0em) scale(1, 1);
        opacity: 1
    }
}

.z-anim-soft-wave {
    animation: z-anim-soft-wave 500ms both
}

@keyframes z-anim-soft-wave {
    0% {
        transform: scale(1.5);
        opacity: 0.0
    }

    20% {
        transform: scale(0.6);
        opacity: 0.2
    }

    30% {
        transform: scale(1.4);
        opacity: 0.3
    }

    40% {
        transform: scale(0.7);
        opacity: 0.4
    }

    50% {
        transform: scale(1.3);
        opacity: 0.5
    }

    60% {
        transform: scale(0.8);
        opacity: 0.6
    }

    70% {
        transform: scale(1.2);
        opacity: 0.7
    }

    80% {
        transform: scale(0.9);
        opacity: 0.8
    }

    90% {
        transform: scale(1.1);
        opacity: 0.9
    }

    100% {
        transform: scale(1);
        opacity: 1.0
    }
}

.z-anim-thin {
    animation: z-anim-thin 500ms both
}

@keyframes z-anim-thin {
    0% {
        transform: scale(3, 0);
        opacity: 0
    }

    80% {
        transform: scale(2, 0.1)
    }

    85% {
        transform: scale(1, 0.8);
        opacity: 0.2
    }

    90% {
        transform: scale(1, 1.1)
    }

    95% {
        transform: scale(1, 0.9)
    }

    100% {
        transform: scale(1, 1);
        opacity: 1
    }
}

.z-anim-zoom {
    animation: z-anim-zoom 500ms both
}

@keyframes z-anim-zoom {
    0% {
        transform: scale(2);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}