@charset "utf-8";

:root {
    --door-color: black;
    --door-shadow: gray;
    --nano-white: rgba(247, 251, 254, 1);
    --bg-color: rgba(218, 236, 243, 1);
    --bg-color2: #B8928B;
    --frame-color: #DBC0D9;
    --h2-color: #D788AF;
    --font-color: #927EAF;
    --font-zen: 'Zen Maru Gothic', sans-serif;
    --head-radius: 6px;

    --ncheki-w: 216px;
    --ncheki-h: 344px;
    --nimg-w: 184px;
    --nimg-h: 248px;

    /* スマホ用 */
    --cheki-w: 135px;
    --cheki-h: 215px;
    --img-w: 115px;
    --img-h: 155px;
}

body {
    background-color: var(--bg-color);
    background-image: url(../img/bg/mainbg4.png);
    background-size: 330px;
}

/* チェキサイズ÷2×8 31-23 43-27 */
.photo-head {
    width: 300px;
    max-width: 100%;
    margin: 20px auto 40px;
    text-align: center;
    color: var(--h2-color);
    padding: 0px 10px 5px;
    border-radius: var(--head-radius);
    border: 2px solid var(--h2-color);
    background-color: var(--nano-white);
    box-shadow: 1px 2px 5px var(--door-shadow);
}

.photo-head h1 {
    font-family: var(--font-zen);
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 5px;
}

.checkit {
    margin-left: auto;
    margin-right: auto;
}

.checkit ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 33px;
    row-gap: 66px;
    font-family: var(--font-zen);
}

.checkit li {
    position: relative;
    width: var(--ncheki-w);
    aspect-ratio: 27/43;
}

.yure {
    position: absolute;
    width: var(--ncheki-w);
    aspect-ratio: 27/43;
    background-color: var(--nano-white);
    border-radius: 3px 3px 6px 6px;
    box-shadow: 2px 2px 6px var(--door-shadow);
    overflow: hidden;
}

/* ピン */
.checkit li::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: dimgray;
    top: 11px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 2px 2px 6px var(--door-shadow);
}

.chekiimg {
    width: var(--nimg-w);
    aspect-ratio: 23/31;
    overflow: hidden;
    margin: 32px auto 4px;
}

.chekiimg img {
    height: var(--nimg-h);
    object-fit: cover;
}

.checkit li p {
    margin: auto;
    width: 95%;
    overflow: hidden;
}

.footer {
    margin-top: 100px;
}

/* アニメーションここから */
.yure:hover {
    animation: shake 0.45s ease;
    transform-origin: 50% 11px;
}

@keyframes shake {
    0% {
        transform: rotate(0);
    }

    16% {
        transform: rotate(3.2deg);
    }

    32% {
        transform: rotate(-2.7deg);
    }

    48% {
        transform: rotate(2deg);
    }

    64% {
        transform: rotate(-1.5deg);
    }

    80% {
        transform: rotate(1deg);
    }

    96% {
        transform: rotate(-0.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* ボタンレイアウト */
.link-btn-area {
    margin: 100px auto 40px;
}
@media (max-width: 800px) {

    body{
        background-size: 220px;
    }

    .checkit ul {
        column-gap: 15px;
        row-gap: 30px;
    }

    .checkit li {
        width: var(--cheki-w);
    }

    .yure {
        width: var(--cheki-w);
        border-radius: 2.1px 2.1px 4.2px 4.2px;
    }

    /* ピン */
    .checkit li::after {
        top: 4px;
    }

    .chekiimg {
        width: var(--img-w);
        margin: 20px auto 2px;
    }

    .chekiimg img {
        height: var(--img-h);
    }

    .checkit li p {
        font-size: 0.71em;
    }
}