@charset "UTF-8";

#contents article .articleInner .anniversary .smp {
    display: none;

    @media screen and (max-width: 768px) {
        display: block;
    }
}

#contents article .articleInner .anniversary .pc {
    display: block;

    @media screen and (max-width: 768px) {
        display: none;
    }
}

#contents article .articleInner .anniversary * {
    font-family: "Shippori Antique B1", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#contents article .articleInner .anniversary h2 {
    text-align: center;
    background: unset;
    padding: 0;
}

#contents article .articleInner .anniversary h2 img {
    /*max-width: 150px;*/
    max-width: 100%;
}

#contents article .articleInner .anniversary__lead {
    text-align: center;
    line-height: 1.8;
    font-size: 18px;

    @media screen and (max-width: 768px) {
        text-align: left;
        font-size: 16px;
    }
}

#contents article .articleInner .anniversary h3 {
    text-align: center;
    color: #000;
    letter-spacing: 0.2em;
    font-size: 35px;
    margin-bottom: 30px;

    @media screen and (max-width: 768px) {
        font-size: 30px;
        line-height: 1.5;
    }
}

#contents article .articleInner .anniversary .history {
    margin-top: 80px;
}

#contents article .articleInner .anniversary .history .year {
    text-align: center;
    font-size: 60px;
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;

    @media screen and (max-width: 768px) {
        margin-bottom: 0;
    }
}

#contents article .articleInner .anniversary .boxwrap {
    position: relative;
}

#contents article .articleInner .anniversary .boxinner::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 50%;

    @media screen and (max-width: 768px) {
        left: 10px;
    }
}

#contents article .articleInner .anniversary .history .box {
    display: flex;
    justify-content: center;
    position: relative;
    column-gap: 60px;
    margin-bottom: 60px;

    @media screen and (max-width: 768px) {
        display: block;
        padding-left: 40px;
        margin-bottom: 20px;
    }
}

#contents article .articleInner .anniversary .history .box.rev {
    flex-direction: row-reverse;
}

#contents article .articleInner .anniversary .history .box {}

#contents article .articleInner .anniversary .history .box>div {
    width: 40%;

    @media screen and (max-width: 768px) {
        width: auto;
    }
}

#contents article .articleInner .anniversary .history .box>div img {
    max-width: 100%;
}

#contents article .articleInner .anniversary .history .text h4 {
    line-height: 1.6;
}

#contents article .articleInner .anniversary .history .text span {
    display: block;
    font-size: 12px;
    background: #000;
    padding: 5px;
    width: fit-content;
    color: #fff;
}

#contents article .articleInner .anniversary .history .text p {
    font-size: 14px;
}

#contents article .articleInner .anniversary .history .photo {
    margin-bottom: 0;
    position: relative;

    @media screen and (max-width: 768px) {
        margin-bottom: 20px;
    }
}

#contents article .articleInner .anniversary .boxwrap::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    right: calc(50% - 4px);
    top: 0;
    visibility: visible;

    @media screen and (max-width: 768px) {
        right: auto;
        left: 7px;
    }
}

#contents article .articleInner .anniversary .boxwrap::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    right: calc(50% - 4px);
    bottom: 0;
    visibility: visible;

    @media screen and (max-width: 768px) {
        right: auto;
        left: 7px;
    }
}

.collaborator {
    border: 1px solid #000;
    padding: 25px;
    margin-top: 80px;
    text-align: center;
}

.collaborator h4 {
    text-align: center;
    font-size: 20px;
    margin-bottom: 30px;

    @media screen and (max-width: 768px) {
        text-align: left;
    }
}

.collaborator__list1 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;

    @media screen and (max-width: 768px) {
        grid-template-columns: repeat(3, 1fr);
    }

    @media screen and (max-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (max-width: 410px) {
        grid-template-columns: repeat(1, 1fr);
    }
}

.collaborator__list1 li {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: 0;

    /*    width: calc((100% - 60px) / 4);

    @media screen and (max-width: 768px) {
        width: calc((100% - 40px) / 3);
    }

    @media screen and (max-width: 640px) {
        width: calc((100% - 20px) / 2);
    }

    @media screen and (max-width: 410px) {
        width: 100%;
    }*/
}


.collaborator__list1 li img {
    width: 100%;
    height: auto;
}

.collaborator__list1 li span::after {
    content: "様";
    font-size: 14px;
    padding-left: 3px;
}

.dee-comment {
    position: relative;
    display: block;
    margin: 1.5em 0;
    padding: 7px 15px;
    max-width: 100%;
    background: #eee;
}

.dee-comment:before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    margin-left: -15px;
    border: 10px solid transparent;
    border-bottom: 15px solid #eee;
}

.dee-comment p {
    text-align: left;
    margin-bottom: 0;
}

.collaborator__list2 {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.collaborator__list2 li::before {
    content: "/";
    padding-right: 10px;
}

.collaborator__list2 li span::after {
    content: "様";
    font-size: 14px;
    padding-left: 3px;
}

.note {
    background: #eee;
    padding: 15px 15px 1px;
    max-width: 680px;
    width: 90%;
    margin: 0 auto 20px;
    font-size: 0.85em;
}

.note p {
    font-size: 18px;
    line-height: 1.4;
}

.note p .dtl {
    background: linear-gradient(transparent 50%, rgba(255, 250, 125, 0.6) 50%);
    font-size: 18px;
}

.note p span {
    font-size: 14px;
}

.bnr {
    text-align: center;
}

.bnr img {
    max-width: 100%;
    height: auto;

}

#contents article .articleInner .anniversary .bnr img.pc {
    display: inline-block;

    @media screen and (max-width: 768px) {
        display: none;
    }
}

.bnr img.sp {
    display: none;

    @media screen and (max-width: 768px) {
        display: inline-block;
    }
}

.onegai {
    text-align: center;
    margin-top: 80px;
}

.onegai p {
    @media screen and (max-width: 768px) {
        text-align: left;
    }
}

.base {
    display: flex;
    gap: 20px;
    justify-content: center;

    @media screen and (max-width: 768px) {
        display: block;
    }
}

.base iframe {
    width: 45%;

    @media screen and (max-width: 768px) {
        width: 90%;
        margin: 0 auto;
    }
}