:root {
    --base-gray: #383832;
    --base-gray-rgb: 56, 56, 50;
    --base-yellow: #ffc720;
    --base-yellow-rgb: 255, 199, 32;
    --main-jp-font: 'M PLUS Rounded 1c', sans-serif;
    --main-en-font: 'Merriweather', serif;
}

body {
    background-color: var(--base-gray);
    color: white;
    font-family: var(--main-jp-font);
}

.en-font {
    font-family: var(--main-en-font);
}

.bg-base-gray {
    background-color: var(--base-gray);
}

a {
    color: white !important;
}

a:hover {
    color: var(--base-yellow) !important;
}

h1 {
    color: var(--base-yellow);
}

.my-button {
    color: white;
    border-radius: 5px;
    border: white 1px solid;
    cursor: pointer;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
    .my-button:hover {
        color: var(--base-yellow);
        transform: translateX(3px) translateY(3px);
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    }
}

@media (hover: none) {
    .my-button:active {
        color: var(--base-yellow);
        transform: translateX(3px) translateY(3px);
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    }
}


border-md-bottom {
    border-bottom: 0;
}

@media only screen and (min-width: 768px) {
    .border-md-bottom {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
    }
}

.hover-border {
    border: white 1px solid;
}

@media (hover: hover) {
    .hover-border:hover {
        border: var(--base-yellow) 1px solid;
    }
}

@media (hover: none) {
    .hover-border:active {
        border: var(--base-yellow) 1px solid;
    }
}

.no-bg-color {
    background-color: rgba(0, 0, 0, 0);
}

.basic-button-size {
    width: 50%;
    max-width: 250px;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Bootstrap の h1 と同一の高さに設定する start */
.height-equal-h1 {
    margin-top: 0;
    margin-bottom: .5rem;
    height: calc(1.375rem + 1.5vw);
}

@media only screen and (min-width: 1200px) {
    .height-equal-h1 {
        height: 2.5rem;
    }
}

/* Bootstrap の h1 と同一の高さに設定する end */

/* Bootstrap の h2 と同一の高さに設定する start */
.height-equal-h2 {
    margin-top: 0;
    margin-bottom: .5rem;
    height: calc(1.325rem + .9vw);
}

@media only screen and (min-width: 1200px) {
    .height-equal-h2 {
        height: 2rem;
    }
}

/* Bootstrap の h2 と同一の高さに設定する end */

/* Bootstrap の h5 と同一の高さに設定する start */
.height-equal-h5 {
    margin-top: 0;
    margin-bottom: .25rem;
    height: 1.25rem;
}

/* Bootstrap の h5 と同一の高さに設定する end */

.border-radius-10 {
    border-radius: 10px;
}

.line-mark-yellow {
    background: linear-gradient(rgba(255, 255, 255, 0) 80%, rgba(var(--base-yellow-rgb), 0.5) 80%);
}

.yellow-color {
    color: var(--base-yellow);
}

#messages_area {
    z-index: 9999;
}

.alert-message {
    width: 80%;
}

@media only screen and (min-width: 992px) {
    .alert-message {
        width: 50%;
    }
}

.new-icon {
    top: -25px;
    left: -40px;
    rotate: z -25deg;
    height: 55px;
    position: absolute;

}

@media only screen and (min-width: 992px) {
    .new-icon {
        top: -35px;
        left: -40px;
        rotate: z -25deg;
        height: 75px;
        position: absolute;
    }
}