@charset "utf-8";
@import "marche_anime.css";

/*
------------
about.css
------------
*/

/* main_area */
#main_area .element::before {
    content: "";
    width: 262px;
    height: 248px;
    background: url(/data/kodomofuruhonten/image/marche/about/main_illust.webp) no-repeat;
    background-size: 100% auto;
    position: absolute;
    bottom: 100px;
    left: -360px;
}
@media only screen and (max-width: 1100px) {
    #main_area .element::before {
        width: calc(262px / 1.5);
        height: calc(248px / 1.5);
        bottom: 200px;
        left: -220px;
    }
}
@media only screen and (max-width: 980px) {
    #main_area .element::before {
        bottom: 65px;
        left: auto;
        right: 0;
    }
}
@media only screen and (max-width: 768px) {
    #main_area .element::before {
        content: none;
    }
}
/* lineup_area */
#lineup_area {
    margin: 0;
}
#lineup_area .inner {
    width: 1100px;
    margin: 0 auto;
}
#lineup_area .inner article {
    position: relative;
}
#lineup_area .inner article h3 {
    font-family: "Cabin Sketch", sans-serif;
    font-size: 9rem;
    color: #713A00;
    letter-spacing: -0.05em;
}
#lineup_area .inner article p {
    font-size: 1.6rem;
    color: #713A00;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 2;
    font-feature-settings: "palt";
    margin: 20px 0 0 0;
}
#lineup_area .inner article ul.img li img {
    border-radius: 30px;
}
#lineup_area .inner article.gourmet .element {
    padding: 65px 0 0 140px;
}
#lineup_area .inner article.gourmet ul.img li:nth-child(1) {
    width: 460px;
    margin: 75px 0 0 60px;
}
#lineup_area .inner article.gourmet ul.img li:nth-child(2) {
    width: 580px;
    position: absolute;
    top: 0;
    right: -40px;
}
#lineup_area .inner article.sweets .element {
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 85px 420px 0 0;
}
#lineup_area .inner article.sweets ul.img li:nth-child(1) {
    width: 344px;
    position: absolute;
    top: -140px;
    right: 0;
}
#lineup_area .inner article.clothing {
    margin: 105px 0 0 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    align-items: center;
}
#lineup_area .inner article.clothing .element {
    margin: 0 0 0 65px;
}
#lineup_area .inner article.clothing ul.img li:nth-child(1) {
    width: 496px;
}
#lineup_area .inner article.workshop {
    margin: 85px 0 0 0;
}
#lineup_area .inner article.workshop .element {
    padding: 65px 0 0 120px;
}
#lineup_area .inner article.workshop ul.img li:nth-child(1) {
    width: 381px;
    margin: 75px 0 0 100px;
}
#lineup_area .inner article.workshop ul.img li:nth-child(2) {
    width: 580px;
    position: absolute;
    top: 0;
    right: -40px;
}
#lineup_area .inner article.workshop ul.img li:nth-child(2)::before {
    content: "";
    width: 241px;
    height: 209px;
    background: url(/data/kodomofuruhonten/image/marche/about/workshop_illust01.webp) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: -120px;
    right: 30px;
    z-index: -1;
}
#lineup_area .inner article.storytime .element {
    width: fit-content;
    padding: 140px 0 0 160px;
}
#lineup_area .inner article.storytime ul.img li:nth-child(1) {
    width: 533px;
    position: absolute;
    top: -70px;
    right: -40px;
}
#lineup_area .inner article.bookstore {
    margin: 105px 0 0 0;
}
#lineup_area .inner article.bookstore .element {
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 65px 145px 0 0;
}
#lineup_area .inner article.bookstore ul.img li:nth-child(1) {
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 65px 125px 0 0;
}
#lineup_area .inner article.bookstore ul.img li:nth-child(1) img {
    width: 397px;
}
#lineup_area .inner article.bookstore ul.img li:nth-child(2) {
    width: 483px;
    position: absolute;
    top: 0;
    left: 0;
}
#lineup_area .inner article.entertainment {
    margin: 105px 0 0 0;
    position: relative;
}
#lineup_area .inner article.entertainment::before {
    content: "";
    width: 291px;
    height: 202px;
    background: url(/data/kodomofuruhonten/image/marche/about/entertainment_illust01.webp) no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 30px;
    right: 0;
}
#lineup_area .inner article.entertainment ul.img {
    margin: 65px 0 0 0;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 40px;
}
#lineup_area .inner article.entertainment ul.img li:nth-child(1) {
    width: 530px;
}
#lineup_area .inner article.entertainment ul.img li:nth-child(2) {
    width: 410px;
}
#lineup_area .inner article.entertainment ul.img li:nth-child(n + 3) {
    width: 340px;
}
#lineup_area .inner article.animal {
    margin: 105px 0 0 0;
}
#lineup_area .inner article.animal .element {
    padding: 65px 0 0 0;
}
#lineup_area .inner article.animal ul.img li:nth-child(1) {
    width: 389px;
    margin: 85px 0 0 140px;
}
#lineup_area .inner article.animal ul.img li:nth-child(2) {
    width: 438px;
    position: absolute;
    top: 0;
    right: 40px;
}
@media only screen and (max-width: 1100px) {
    #lineup_area .inner {
        width: 85vw;
    }
    #lineup_area .inner article h3 {
        font-size: 6rem;
    }
    #lineup_area .inner article.gourmet ul.img li:nth-child(1) {
        width: calc(460px / 1.5);
        margin: 75px 0 0 100px;
    }
    #lineup_area .inner article.gourmet ul.img li:nth-child(2) {
        width: calc(580px / 1.5);
        top: 0;
        right: 40px;
    }
    #lineup_area .inner article.sweets .element {
        padding: 30px 290px 0 0;
    }
    #lineup_area .inner article.sweets ul.img li:nth-child(1) {
        width: calc(344px / 1.5);
        top: -50px;
    }
    #lineup_area .inner article.clothing {
        margin: 65px 0 0 0;
    }
    #lineup_area .inner article.clothing ul.img li:nth-child(1) {
        width: calc(496px / 1.5);
    }
    #lineup_area .inner article.workshop {
        margin: 65px 0 0 0;
    }
    #lineup_area .inner article.workshop .element {
        padding: 45px 0 0 160px;
    }
    #lineup_area .inner article.workshop ul.img li:nth-child(1) {
        width: calc(381px / 1.5);
        margin: 75px 0 0 130px;
    }
    #lineup_area .inner article.workshop ul.img li:nth-child(2) {
        width: calc(580px / 1.5);
        right: 0;
    }
    #lineup_area .inner article.workshop ul.img li:nth-child(2)::before {
        width: calc(241px / 1.5);
        height: calc(209px / 1.5);
        top: -80px;
        right: 20px;
    }
    #lineup_area .inner article.storytime .element {
        width: fit-content;
        padding: 60px 0 0 200px;
    }
    #lineup_area .inner article.storytime ul.img li:nth-child(1) {
        width: calc(533px / 1.5);
        right: 0;
    }
    #lineup_area .inner article.bookstore {
        margin: 65px 0 0 0;
    }
    #lineup_area .inner article.bookstore .element {
        padding: 45px 145px 0 0;
    }
    #lineup_area .inner article.bookstore ul.img li:nth-child(1) {
        padding: 30px 125px 0 0;
    }
    #lineup_area .inner article.bookstore ul.img li:nth-child(1) img {
        width: calc(397px / 1.5);
    }
    #lineup_area .inner article.bookstore ul.img li:nth-child(2) {
        width: calc(483px / 1.5);
        position: absolute;
        left: 50px;
    }
    #lineup_area .inner article.entertainment {
        margin: 65px 0 0 0;
    }
    #lineup_area .inner article.entertainment::before {
        width: calc(291px / 1.5);
        height: calc(202px / 1.5);
        top: 65px;
        right: 30px;
    }
    #lineup_area .inner article.entertainment ul.img {
        margin: 45px 0 0 0;
        gap: 21px;
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(1) {
        width: calc(530px / 1.5);
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(2) {
        width: calc(410px / 1.6);
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(n + 3) {
        width: calc(calc(100% / 3) - 14px)
    }
    #lineup_area .inner article.animal {
        margin: 65px 0 0 0;
    }
    #lineup_area .inner article.animal .element {
        padding: 65px 0 0 100px;
    }
    #lineup_area .inner article.animal ul.img li:nth-child(1) {
        width: calc(389px / 1.5);
        margin: 65px 0 0 80px;
    }
    #lineup_area .inner article.animal ul.img li:nth-child(2) {
        width: calc(438px / 1.5);
    }
}
@media only screen and (max-width: 980px) {
    #lineup_area {
        margin: 85px 0 0 0;
    }
    #lineup_area .inner article:not(:first-child) {
        margin: 45px 0 0 0;
    }
    #lineup_area .inner article .element {
        margin: 0 !important;
        padding: 0 !important;
    }
    #lineup_area .inner article ul.img {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30px 0 0 0 !important;
        padding: 0 !important;
    }
    #lineup_area .inner article ul.img li {
        width: calc(50% - 10px) !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #lineup_area .inner article ul.img li img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    #lineup_area .inner article.clothing {
        display: block;
    }
    #lineup_area .inner article.workshop ul.img li:nth-child(2) {
        position: relative !important;
    }
    #lineup_area .inner article.workshop ul.img li:nth-child(2)::before {
        width: calc(241px / 2);
        height: calc(209px / 2);
        top: -60px !important;
        right: 30px !important;
    }
    #lineup_area .inner article.entertainment::before {
        width: calc(291px / 2);
        height: calc(202px / 2);
        top: 0;
        right: 60px;
    }
    #lineup_area .inner article.entertainment ul.img {
        justify-content: space-between;
        gap: 20px;
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(1) {
        width: calc(100% / 2 - 10px);
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(2) {
        width: calc(100% / 2 - 10px);
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(n + 3) {
        width: calc(100% / 2 - 10px);
    }
}
@media only screen and (max-width: 768px) {
    #lineup_area {
        margin: 65px 0 0 0;
    }
    #lineup_area .inner article h3 {
        font-size: 4rem;
    }
    #lineup_area .inner article p {
        margin: 15px 0 0 0;
        line-height: 1.7;
    }
    #lineup_area .inner article ul.img {
        margin: 20px 0 0 0 !important;
        gap: 10px;
    }
    #lineup_area .inner article ul.img li {
        width: calc(50% - 5px) !important;
    }
    #lineup_area .inner article ul.img li img {
        border-radius: 15px;
    }
    #lineup_area .inner article.workshop ul.img li:nth-child(2)::before {
        content: none;
    }
    #lineup_area .inner article.entertainment::before {
        content: none;
    }
    #lineup_area .inner article.entertainment ul.img {
        gap: 10px;
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(1) {
        width: calc(100% / 2 - 5px);
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(2) {
        width: calc(100% / 2 - 5px);
    }
    #lineup_area .inner article.entertainment ul.img li:nth-child(n + 3) {
        width: calc(100% / 2 - 5px);
    }
    #lineup_area .inner article.sweets ul.img,
    #lineup_area .inner article.storytime ul.img {
        position: relative;
    }
    #lineup_area .inner article.sweets ul.img::before {
        content: "";
        width: calc(241px / 2);
        height: calc(209px / 2);
        background: url(/data/kodomofuruhonten/image/marche/about/workshop_illust01.webp) no-repeat;
        background-size: 100% auto;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    #lineup_area .inner article.storytime ul.img::before {
        content: "";
        width: calc(291px / 2.5);
        height: calc(202px / 2.5);
        background: url(/data/kodomofuruhonten/image/marche/about/entertainment_illust01.webp) no-repeat;
        background-size: 100% auto;
        position: absolute;
        bottom: 0;
        right: 20px;
    }
}