/* footerのオーバーライド */
#footer {
    position: relative;
    z-index: 10;
    background-color: #fff;
}

/* 背景レイヤー */
#background {
    position: fixed;
    top: 30px;
    left: 0;
    /*width: 100%;*/
    width: 100vw;
    height: 100vh;
    /*min-height: 100%;*/
    min-height: 100vh;
    background: url("../../img/tsumuiro_special.jpg") no-repeat center center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

/* コンテンツレイヤー */
#content {
    position: relative;
    z-index: 3;
    width: 80%;
    max-width: 800px;
    margin: 250px auto 50px auto;
    /*margin: 230px auto 0 auto;*/
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    text-align: center;
}

#scroll-wrapper {
    position: relative;
    z-index: 0;
}

#ticket-date {
    font-size: 18px;
}

.ticket-type li{
    margin: 10px 0;
}

.ticket-type a.disabled {
    color: #999;
    pointer-events: none;
    text-decoration: none;
    cursor: default;
}

/* アイコンアニメーション */

.card {
    --grad-size: min(30vh, 45vw);
    width: min(10vh, 15vw);
    aspect-ratio: 1;
    margin: min(5vh, 1.67vw);
    border-radius: 10%;
    background-image: radial-gradient(#777 0%, #444 30%, #222 50%);
    background-color: #222;
    background-position: calc(var(--mouse-x) * 1px - var(--grad-size) / 2)
    calc(var(--mouse-y) * 1px - var(--grad-size) / 2);
    transition: background-position 2s cubic-bezier(0, 0, 0, 1);
    background-attachment: fixed;
    background-size: var(--grad-size) var(--grad-size);
    background-repeat: no-repeat;
    overflow: hidden;
    cursor: pointer;
}

.card::before {
    content: "";
    width: min(10vh, 15vw);
    aspect-ratio: 1;
    border-radius: 10%;
    position: absolute;
    background-image: linear-gradient(
            135deg,
            #fff0 45%,
            #fff7 48% 52%,
            #fff0 55%
    );
    background-size: 300% 300%;
    background-position: 100% 100%;
    transition: background-position 0.3s linear;
}

.card:hover::before {
    background-position: 0% 0%;
}

.card > img {
    width: min(10vh, 15vw);
    aspect-ratio: 1;
    object-fit: cover;
}

.card > :first-child {
    mix-blend-mode: multiply;
    position: absolute;
    border-radius: 10%;
    filter: blur(min(3vh, 1vw)) brightness(0%);
    transition: filter 0.5s ease;
}

.card:hover > :first-child {
    filter: blur(min(4.5vh, 1.5vw)) brightness(30%);
}

.card > :nth-child(2) {
    mix-blend-mode: plus-lighter;
}

.link-btn {
    /* display: inline-block; */
    display: flex;
    min-width: 198px;
    line-height: 50px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    /* text-transform: uppercase; */
    background: #203787;
    font-size: 18px;
    transition    : 0.8s; /* なめらか変化 */
    text-decoration:none;
}
.link-btn:hover {
    color         : #000039;   /* 背景色     */
    background    : #ccdbf8;   /* 文字色     */
}

.btn-str {
    align-content: center;
    margin-left: 1rem;
    white-space: nowrap;
}

.link-area {
    margin: 1rem 0;
}

/* 600px以下の場合 */
@media screen and (max-width: 600px) {
    .link-btn {
    }
}

/* 600pxより大きい場合 */
@media screen and (min-width: 601px) {
    .link-btn {
        font-size: larger;
        width: 65%;
    }
}