.page-id-6255 #top_title_area,
.page-id-6255 .c-pageTitle,
.page-id-6255 .p-breadcrumb,
.page-id-6255 .l-mainContent__inner > .post_content {
    display: none !important;
}

.comicPage {
    overflow: hidden;
    background: #fff;
    color: #3f4141;
    font-family: "fot-tsukuardgothic-std", "Noto Sans JP", sans-serif;
}

.comicHero {
    position: relative;
    min-height: 650px;
    padding-top: clamp(48px, 6vw, 94px);
    background:
        radial-gradient(circle at 0 42%, rgba(238, 211, 195, .72) 0 55px, transparent 56px),
        radial-gradient(circle at 100% 15%, rgba(207, 237, 245, .9) 0 118px, transparent 119px),
        #fff;
}

.comicHero__inner {
    width: min(1520px, calc(100% - 96px));
    min-height: 555px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 38% 62%;
    align-items: center;
}

.comicHero__copy {
    position: relative;
    z-index: 2;
    padding: 18px 0 20px 74px;
}

.comicHero__eyebrow {
    margin: 0 0 36px;
    color: #2f3d3a;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .19em;
}

.comicHero h1 {
    margin: 0;
    color: #559d9a;
    font-size: clamp(40px, 3.8vw, 68px);
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: clamp(.04em, .45vw, .1em);
}

.comicHero h1 span {
    display: block;
    white-space: nowrap;
}

.comicHero__lead {
    margin: 48px 0 0;
    color: #49504e;
    font-size: 17px;
    font-weight: 500;
    line-height: 2.05;
    letter-spacing: .11em;
}

.comicHero__visual {
    position: relative;
    align-self: stretch;
    min-width: 0;
}

.comicHero__visual img {
    position: absolute;
    z-index: 1;
    width: min(1080px, 70vw);
    max-width: none;
    height: auto;
    right: -70px;
    bottom: -10px;
    display: block;
}

.comicHero__dot {
    position: absolute;
    z-index: 3;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(#59a7a2 3px, transparent 3.5px);
    background-size: 22px 22px;
    opacity: .8;
    transform: rotate(42deg);
}

.comicHero__dot--left { left: -46px; bottom: 75px; }
.comicHero__dot--right { right: -28px; top: 220px; background-image: radial-gradient(#f0c936 3px, transparent 3.5px); }

.comicArchive {
    position: relative;
    padding: 48px 40px 120px;
    background: linear-gradient(180deg, #fff 0, #fbfbfb 260px);
}

.comicArchive__heading {
    position: relative;
    width: min(780px, 100%);
    margin: 0 auto 92px;
    text-align: center;
}

.comicArchive__heading h2 {
    display: inline-block;
    margin: 0;
    color: #559d9a;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: .22em;
}

.comicArchive__heading p {
    margin: 26px 0 0;
    color: #505654;
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: .11em;
}

.comicArchive__leaf {
    display: inline-block;
    width: 54px;
    height: 30px;
    margin: 0 29px 1px 0;
    border-bottom: 2px solid #86c478;
    border-radius: 50%;
    transform: rotate(18deg);
}

.comicArchive__leaf::before,
.comicArchive__leaf::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 8px;
    border: 2px solid #86c478;
    border-radius: 100% 0 100% 0;
}

.comicArchive__leaf::before { transform: translate(15px, 13px) rotate(20deg); }
.comicArchive__leaf::after { transform: translate(32px, 5px) rotate(195deg); }
.comicArchive__leaf--right { margin: 0 0 1px 25px; transform: scaleX(-1) rotate(18deg); }

.comicArchive__grid {
    width: min(1780px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 68px;
}

.comicCard {
    min-height: 590px;
    display: grid;
    grid-template-columns: 46% 54%;
    overflow: hidden;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 12px 48px rgba(67, 80, 77, .08);
    container-type: inline-size;
}

.comicCard__content {
    position: relative;
    z-index: 2;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 50px 14px 44px 52px;
}

.comicCard__number {
    margin: 0 0 32px;
    color: #78b957;
    font-size: 31px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.comicCard h3 {
    margin: 0;
    color: #78b957;
    font-size: clamp(18px, 3.8cqw, 34px);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .02em;
    white-space: nowrap;
}

.comicCard__description {
    margin: 54px 0 34px;
    color: #464b49;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: .08em;
}

.comicCard__button {
    width: min(310px, 100%);
    min-height: 74px;
    margin-top: auto;
    padding: 8px 10px 8px 30px;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 38px;
    border-radius: 100px;
    background: #78b957;
    color: #fff !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .2em;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .2s ease, background-color .2s ease;
}

.comicCard__button i {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #f8f1d9;
    color: #72ad57;
    font-size: 25px;
    font-style: normal;
    line-height: 1;
}

.comicCard__button:hover { transform: translateY(-2px); background: #68aa47; }

.comicCard__image {
    min-width: 0;
    display: block;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: #f7f7f5;
    cursor: pointer;
}

.comicCard__image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    filter: grayscale(1);
    transition: transform .35s ease;
}

.comicCard:hover .comicCard__image img { transform: scale(1.025); }

html.is-comic-modal-open,
html.is-comic-modal-open body {
    overflow: hidden !important;
}

html.is-comic-modal-open .gHeader,
html.is-comic-modal-open .megamenu {
    visibility: hidden !important;
}

html.is-comic-modal-open body {
    position: fixed;
    left: 0;
    width: 100%;
}

.comicModal[hidden] { display: none !important; }

.comicModal {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    opacity: 0;
    transition: opacity .22s ease;
}

.comicModal.is-open { opacity: 1; }

.comicModal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(42, 54, 52, .78);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.comicModal__panel {
    position: relative;
    width: min(940px, 100%);
    height: min(94vh, 980px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-radius: 24px;
    background: #f7f6f1;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    transform: translateY(18px) scale(.985);
    transition: transform .22s ease;
}

.comicModal.is-open .comicModal__panel { transform: none; }

.comicModal__header {
    position: relative;
    z-index: 2;
    min-height: 98px;
    padding: 17px 116px 16px 34px;
    display: flex;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid #e4e7e3;
}

.comicModal__header span {
    display: block;
    margin-bottom: 3px;
    color: #78b957;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
}

.comicModal__header h2 {
    margin: 0;
    color: #559d9a;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .08em;
}

.comicModal__close {
    position: absolute;
    top: 17px;
    right: 20px;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #559d9a;
    color: #fff;
    cursor: pointer;
}

.comicModal__close i {
    position: absolute;
    top: 26px;
    left: 19px;
    width: 26px;
    height: 2px;
    background: #fff;
    transform: rotate(45deg);
}

.comicModal__close i:nth-child(2) { transform: rotate(-45deg); }
.comicModal__close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.comicModal__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 0;
    outline: none;
}

.comicModal__pages {
    width: 100%;
    margin: 0;
    counter-reset: comic-page;
}

.comicModal__page {
    margin: 0;
    counter-increment: comic-page;
}

.comicModal__page img {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    box-shadow: 0 5px 22px rgba(58, 65, 63, .12);
}

.comicModal__page figcaption {
    display: none;
}

.comicModal__external {
    width: min(300px, 100%);
    min-height: 58px;
    margin: 18px auto 0;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border: 2px solid #78b957;
    border-radius: 100px;
    background: #fff;
    color: #68a949 !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}

@media (max-width: 1500px) {
    .comicHero { min-height: 580px; }
    .comicHero__inner { width: min(1100px, calc(100% - 48px)); min-height: 500px; grid-template-columns: 43% 57%; }
    .comicHero__copy { padding-left: 34px; }
    .comicHero__visual img { width: 790px; right: -165px; }
    .comicArchive__grid { max-width: 940px; gap: 34px; }
    .comicCard { min-height: 460px; }
    .comicCard__content { padding: 38px 10px 32px 34px; }
    .comicCard h3 { font-size: clamp(18px, 3.8cqw, 22px); }
    .comicCard__description { margin-top: 35px; font-size: 15px; }
    .comicCard__button { min-height: 58px; font-size: 16px; gap: 24px; }
    .comicCard__button i { width: 42px; height: 42px; }
}

@media (max-width: 767px) {
    .comicHero {
        min-height: 700px;
        padding-top: 54px;
        background: radial-gradient(circle at 0 22%, rgba(238, 211, 195, .6) 0 45px, transparent 46px), #fff;
    }
    .comicHero__inner { width: 100%; min-height: 630px; display: block; }
    .comicHero__copy { padding: 0 28px; }
    .comicHero__eyebrow { margin-bottom: 18px; font-size: 13px; }
    .comicHero h1 { font-size: clamp(31px, 9vw, 42px); line-height: 1.42; letter-spacing: .04em; }
    .comicHero__lead { margin-top: 24px; font-size: 13px; line-height: 1.9; }
    .comicHero__visual { position: absolute; inset: auto 0 0; height: 370px; }
    .comicHero__visual img { width: 680px; right: -245px; bottom: -8px; }
    .comicHero__dot { width: 80px; height: 80px; background-size: 16px 16px; }
    .comicHero__dot--left { bottom: 245px; }
    .comicHero__dot--right { top: 390px; }

    .comicArchive { padding: 45px 18px 80px; }
    .comicArchive__heading { margin-bottom: 48px; }
    .comicArchive__heading h2 { font-size: 24px; letter-spacing: .13em; }
    .comicArchive__heading p { margin-top: 18px; font-size: 12px; }
    .comicArchive__leaf { width: 34px; margin-right: 12px; }
    .comicArchive__leaf--right { margin-left: 10px; margin-right: 0; }
    .comicArchive__grid { grid-template-columns: 1fr; gap: 24px; }
    .comicCard { min-height: 330px; grid-template-columns: 50% 50%; border-radius: 20px; }
    .comicCard__content { padding: 26px 8px 24px 22px; }
    .comicCard__number { margin-bottom: 17px; font-size: 21px; }
    .comicCard h3 { font-size: clamp(16px, 4.4cqw, 20px); letter-spacing: 0; white-space: nowrap; }
    .comicCard__description { margin: 24px 0 18px; font-size: 11px; line-height: 1.65; }
    .comicCard__button { min-height: 47px; padding: 5px 6px 5px 18px; gap: 17px; font-size: 13px; }
    .comicCard__button i { width: 35px; height: 35px; font-size: 18px; }

    .comicModal { padding: 0; }
    .comicModal__panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
    .comicModal__header { min-height: 74px; padding: 11px 78px 10px 18px; }
    .comicModal__header h2 { font-size: 18px; }
    .comicModal__close { top: 10px; right: 12px; width: 54px; height: 54px; }
    .comicModal__close i { top: 25px; left: 16px; width: 22px; }
    .comicModal__body { padding: 0; }
    .comicModal__page { margin: 0; }
    .comicModal__page img { box-shadow: 0 3px 13px rgba(58, 65, 63, .12); }
    .comicModal__external { min-height: 52px; margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .comicModal,
    .comicModal__panel { transition: none; }
}