.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: 58px;
    height: 44px;
    margin: 0 29px 1px 0;
    background: center / contain no-repeat url("../../assets/images/leaves/14.svg");
    transform: rotate(72deg);
}

.comicArchive__leaf::before,
.comicArchive__leaf::after {
    display: none;
}

.comicArchive__leaf--right { margin: 0 0 1px 25px; transform: scaleX(-1) rotate(72deg); }

.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: 50%;
    left: 50%;
    width: 26px;
    height: 2px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;
}

.comicModal__close i:nth-child(2) { transform: translate(-50%, -50%) 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;
}

.comicVideos {
    background: linear-gradient(180deg, #fbfbfb, #f4f8f5);
    padding: 100px 40px 130px;
    position: relative;
}

.comicVideos__heading {
    margin-bottom: 60px;
}

.comicVideos__grid {
    display: grid;
    gap: clamp(18px, 2.2vw, 38px);
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0 auto;
    width: min(1780px, 100%);
}

.comicVideoCard {
    min-width: 0;
}

.comicVideoCard__trigger {
    background: #fff;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 12px 40px rgba(67, 80, 77, .09);
    color: inherit;
    cursor: pointer;
    display: block;
    overflow: hidden;
    padding: 0;
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease;
    width: 100%;
}

.comicVideoCard__trigger:hover,
.comicVideoCard__trigger:focus-visible {
    box-shadow: 0 18px 48px rgba(67, 80, 77, .15);
    transform: translateY(-5px);
}

.comicVideoCard__visual {
    aspect-ratio: 9 / 13;
    background: #dce9e4;
    display: block;
    overflow: hidden;
    position: relative;
}

.comicVideoCard__visual::after {
    background: linear-gradient(180deg, transparent 56%, rgba(28,44,41,.36));
    content: "";
    inset: 0;
    position: absolute;
}

.comicVideoCard__visual img {
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
    width: 100%;
}

.comicVideoCard__trigger:hover img {
    transform: scale(1.04);
}

.comicVideoCard__play {
    background: #78b957;
    border: 5px solid rgba(255,255,255,.88);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(37,56,51,.24);
    height: 68px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    z-index: 2;
}

.comicVideoCard__play::before {
    border-bottom: 10px solid transparent;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    content: "";
    left: 27px;
    position: absolute;
    top: 19px;
}

.comicVideoCard__meta {
    display: block;
    padding: 22px 22px 25px;
}

.comicVideoCard__meta small {
    color: #78b957;
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 7px;
}

.comicVideoCard__meta strong {
    color: #559d9a;
    display: block;
    font-size: clamp(15px, 1.2vw, 20px);
    letter-spacing: .06em;
}

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

.comicVideoModal.is-open .comicVideoModal__panel {
    transform: none;
}

.comicVideoModal__body {
    min-height: 0;
}

.comicVideoModal__body iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

@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; }
    .comicVideos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 940px; }
}

@media (max-width: 767px) {
    .comicHero {
        min-height: 750px;
        padding-top: 108px;
        background: radial-gradient(circle at 0 22%, rgba(238, 211, 195, .6) 0 45px, transparent 46px), #fff;
    }
    .comicHero__inner { width: 100%; min-height: 642px; 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: 330px; }
    .comicHero__visual img { width: min(640px, 155vw); right: -95px; bottom: 0; }
    .comicHero__dot { width: 80px; height: 80px; background-size: 16px 16px; }
    .comicHero__dot--left { bottom: 245px; }
    .comicHero__dot--right { top: 430px; }

    .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: 36px; height: 30px; margin-right: 12px; }
    .comicArchive__leaf--right { margin-left: 10px; margin-right: 0; }
    .comicArchive__grid { grid-template-columns: 1fr; gap: 24px; }
    .comicCard { min-height: 360px; 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: normal; overflow-wrap: anywhere; }
    .comicCard__description { margin: 18px 0 16px; 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 { width: 22px; }
    .comicModal__body { padding: 0; }
    .comicModal__page { margin: 0; }
    .comicModal__page img { box-shadow: 0 3px 13px rgba(58, 65, 63, .12); }
    .comicVideos { padding: 70px 18px 90px; }
    .comicVideos__heading { margin-bottom: 42px; }
    .comicVideos__grid { display: flex; gap: 16px; margin-inline: -18px; max-width: none; overflow-x: auto; padding: 0 18px 20px; scroll-snap-type: x mandatory; width: auto; }
    .comicVideoCard { flex: 0 0 min(74vw, 280px); scroll-snap-align: start; }
    .comicVideoCard__trigger { border-radius: 18px; }
    .comicVideoCard__visual { aspect-ratio: 9 / 12; }
    .comicVideoCard__meta { padding: 18px 18px 21px; }
    .comicVideoCard__play { height: 58px; width: 58px; }
    .comicVideoCard__play::before { left: 23px; top: 15px; }
    .comicVideoModal { padding: 0; }
    .comicVideoModal__panel { border-radius: 0; height: 100dvh; width: 100%; }
}

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