/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: defaults,not ie 11
*/

.top-image {
    background: url('https://static.minatoaqua.info/img/bg.png') white center/cover no-repeat;
    height: 350px;
}
.dummy-fullscreen-box {
    height: 350px;
}


.ticket_goods {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-evenly;
    background: none;
}
.top-btn-link {
    transition: ease-out 100ms;
}
.top-btn-link:hover {
    -webkit-filter: brightness(1.2);
            filter: brightness(1.2);
}
.top-btn {
    position: relative;
    width: 300px;
    max-width: 100%;
    -webkit-filter: drop-shadow(0 0 10px rgba(50, 50, 50, 0.266));
            filter: drop-shadow(0 0 10px rgba(50, 50, 50, 0.266));
}

.goods,
.ticket {
    display: grid;
    justify-content: space-evenly;
    padding-top: 5rem;
    padding-bottom: 3rem;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
}
.ticket-column,
.goods-column {
    justify-self: center;
}
.ticket-title,
.goods-title {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / span 2;
    margin-bottom: 5rem;
}

.ticket-title {
    background-image: url('https://static.minatoaqua.info/svg/title_ticket.svg');
    color: #d3a85c;
}
.ticket-column {
    background-color: rgba(255, 255, 255, 0.666);
    padding: 2rem;
    -webkit-filter: drop-shadow(0 0 20px var(--alpha-black-color));
            filter: drop-shadow(0 0 20px var(--alpha-black-color));
}
.ticket-img {
    width: 400px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    -webkit-filter: drop-shadow(0 0 10px var(--alpha-black-color));
            filter: drop-shadow(0 0 10px var(--alpha-black-color));
}
.ticket-block {
    margin: 2rem 0 3rem 0;
}
.ticket-block > p {
    margin-left: 2rem;
}
.ticket-block h4 {
    border-bottom: solid 2px black;
    padding-bottom: 0.2rem;
    font-size: 1.17rem;
}
.ticket .precaution {
    padding-left: 1.5rem;
}

.goods h3 {
    font-size: 1.5rem;
}
.goods-title {
    background-image: url('https://static.minatoaqua.info/svg/title_goods.svg');
}
.goods-img {
    width: 700px;
    max-width: 100%;
}


@media (max-width: 1150px) and (min-width: 1001px) {
    .ticket-block > p {
        margin-left: 1rem;
    }
}
@media (min-width: 1001px) {
    .ticket,
    .goods {
        grid-template-columns: 1fr 1fr;
    }
    .ticket-column:nth-of-type(1),
    .goods-column:nth-of-type(1) {
        margin-left: 2rem;
    }
    .ticket-column:nth-of-type(2),
    .goods-column:nth-of-type(2) {
        margin-right: 2rem;
    }
}
@media (max-width: 1000px) {
    .ticket {
        padding-top: 3rem;
        row-gap: 3rem;
    }
    .goods {
        row-gap: 2rem;
    }
    .ticket-title,
    .goods-title {
        grid-column: 1;
        margin-bottom: 1rem;
    }
    .goods-column {
        margin-left: 2rem;
        margin-right: 2rem;
    }
}

@media (max-width: 700px) {
    .ticket-column:nth-of-type(1) {
        border-top: dotted 2px var(--blue-color);
        border-bottom: dotted 2px var(--blue-color);
    }
    .ticket-column:nth-of-type(2) {
        border-top: dotted 2px var(--pink-color);
        border-bottom: dotted 2px var(--pink-color);
    }
}

@media (max-width: 900px) {
    .ticket_goods {
        padding: 2rem 0;
    }
}

@media (max-width: 500px) {
    .ticket-column {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .ticket-block > p {
        margin-left: 1rem;
    }
}