:root {
    --student-red-color: #C83B27;
    --student-blue-color: #0D6DB7;
    --student-yellow-color: #F7ED12;
    --margin-s: 20px;
    --margin-r: 40px;
    interpolate-size: allow-keywords;
}

/* reset */
#sec-report {
    position: relative;
    z-index: 1;
    padding-top: 80px;
    @media screen and (max-width: 600px) {
        padding-top: 40px;
    }
}

#svg-container {
    z-index: 1;
    @media screen and (max-width: 600px) {
        display: none;
    }
}

.connection-path {
    stroke: var(--student-yellow-color);
    stroke-width: 2;
    fill: none;
}

#jumbotron {
    z-index: 2;

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

.mainvisual.blue {
    margin-bottom: 0;
    border-bottom: 0;
}

#sec-obog-about {
    background-color: #fefef6;
    background-image: linear-gradient(90deg, #0000000a 1.4px, transparent 1.4px), linear-gradient(#0000000a 1.4px, transparent 1.4px);
    background-position: 16px 16px;
    background-size: 33.4px 33.4px;
    overflow: hidden;
    position: relative;

    body.obog-about & {
         max-height: unset;
    }
    summary {
        padding-bottom: 120px;
        list-style: none;
        @media screen and (max-width: 600px) {
            padding-bottom: 100px;
        }
        &::marker{
            display: none;
        }
    }
    .summary-button {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 120px;
        z-index: 2;
        transition: .3s;
        display: flex;
        align-items: center;
        justify-content: center;
        @media screen and (max-width: 600px) {
            height: 100px;
        }

        span {
            transition: .3s;
            width: 100%;
            max-width: 200px;
            border: 1px solid var(--main-color);
            border-radius: 100px;
            background: var(--main-color);
            color: #fff;
            padding: .2em 1em;
            letter-spacing: .1em;
            text-align: center;
            cursor: pointer;
        }
        span:hover {
            opacity: .5;
        }
        details[open] & {
            opacity: 0;
            visibility: hidden;
        }
    }
    details {
      &::details-content {
        content-visibility: unset;
        display: block grid;
    
        @media (prefers-reduced-motion: no-preference) {
          transition-duration: 1s;
          transition-property: grid-template-rows;
        }
      }
    
      &:not([open])::details-content {
        grid-template-rows: 0fr;
      }
    
      &[open]::details-content {
        grid-template-rows: 1fr;
      }
    }
    .l-inner {
        max-width: 940px;
        margin: auto;
        padding: 80px 0 0;
        background: none;
        overflow: visible;
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 60px;
        z-index: 1;
        
        
        body.obog-about & {
            padding-bottom: 80px;
        }
        @media screen and (max-width: 600px) {
            padding: 40px 1rem 0;
        }
    }
    .l-inner.about-main-container {
        padding: 0 0 80px;
        @media screen and (max-width: 600px) {
            padding: 0px 1rem 80px;
        }
    }

    .sec-report-wrap {
        position: relative;
        overflow: hidden;
    }

    .sec-report-wrap::before {
        left: 0;
        top: 0;
        aspect-ratio: 240/410;
        width: 30%;
        margin: 0 calc(50% - 50vw);
        background-image: url('/wp-content/themes/report/assets/img/obog/student/deco-bg2.png');

        @media screen and (max-width: 600px) {
            width: 24%;
        }
    }

    /* common */
	
    .heading-box h3 {
        font-size: 28px;
        font-weight: 600;
        letter-spacing: .2em;
        color: var(--student-blue-color);
        line-height: 1.4;
        margin-bottom: 1em;
        flex-shrink: 0;

        @media screen and (max-width: 600px) {
            font-size: max(calc(80vw/16), 1.2rem);
        }
    }

    .sec-report-wrap::before,
    .sec-report-wrap::after {
        #content: "";
        display: block;
        position: absolute;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .act-box h3 {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: .1em;
        display: inline-flex;
        align-items: center;
        gap: .5em;

        @media screen and (max-width: 600px) {
            font-size: max(calc(80vw/16), 1.2rem);
        }
    }

    .act-box h3.no-br span {
        height: 1.8em;
    }

    .bg-deco {
        padding: 0 .2em;
    }

    h3 span.bg-deco {
        line-height: 1.8;
        background: repeating-linear-gradient(transparent, transparent .1em, var(--student-yellow-color) .1em, var(--student-yellow-color) 1.7em, transparent 1.7em, transparent 1.8em)
    }

    a.back-to-top {
        text-align: center;
        font-weight: 600;
        margin-top: 40px;
        position: relative;
        z-index: 1;

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

    /* boxes */
    .heading-box {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        gap: var(--margin-s);
        align-items: stretch;
        position: relative;

        @media screen and (max-width: 820px) {
            gap: 0;
            flex-wrap: nowrap;
        }

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

    .heading-box .text {
        flex-basis: 400px !important;
        flex-grow: 0;
        display: flex;
        flex-direction: column;
    }

    .heading-box .text br.sp-br {
        @media screen and (max-width: 820px) {
            display: none;
        }

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

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

    .heading-box .img {
        width: auto;
        height: 100%;
        max-height: 270px;
        aspect-ratio: 378 / 411;
        margin: 0;
        position: relative;
        display: block;
        flex-grow: 0;
        flex-basis: unset;

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

        @media screen and (max-width: 600px) {
            position: absolute;
            right: -2rem;
            top: 0;
            height: 85%;
            max-width: 40vw;
            transform: translateY(-28vw);
            z-index: -1;
        }
    }

    .heading-box .img figure {
        margin: 0;
    }

    .act-box {
        display: inline-flex;
        align-items: flex-start;
        flex-direction: column;
        gap: var(--margin-s);
        position: relative;
        z-index: 1;
        body.obog-about & {
            opacity: 1;
        }
        @media screen and (max-width: 600px) {
            margin: 0 !important;
        }
    }

    .act-box > * {
        z-index: 2;
    }

    .act-box.act1 :is(.h3-box, p) {
        width: 436px;
    }

    .act-box.act2 :is(.h3-box, p) {
        margin-left: auto;
        width: 360px;
    }

    .act-box.act3 :is(.h3-box, p) {
        margin-left: 40%;

        @media screen and (max-width: 820px) {
            margin-left: 35%;
        }
    }

    .act-box.act4 :is(.h3-box, p) {
        width: 420px;
    }

    .act-box.act4 {
        margin-top: 40px;
    }

    .act-box.act5 :is(.h3-box, p) {
        margin-left: 30%;
        width: 300px;

        @media screen and (max-width: 820px) {
            margin-left: 12%;
        }
    }

    .act-box.act6 {
        margin-top: 80px;

        @media screen and (max-width: 820px) {
            margin-top: 60px;
        }
    }

    .act-box.act6 :is(.h3-box, p) {
        margin-left: 43%;
        width: 400px;

        @media screen and (max-width: 1024px) {
            margin-left: 40%;
        }
    }

    .act-box.act7 :is(.h3-box, p) {
        margin-left: 22%;
    }

    .act-box.act7 .bg-deco {
        font-size: 2rem;
    }

    .act-box.act8 {
        z-index: 2;
    }

    .act-box.act8 :is(.h3-box, p) {
        margin-left: auto;
        width: 306px;
    }

    .act-box.act9 {
        margin-top: 80px;
    }

    .act-box .h3-box {
        display: flex;
        align-items: center;
        gap: 1rem;
        position: relative;
        z-index: 2;

        @media screen and (max-width:600px) {
            margin: 0 !important;
            width: 100% !important;
            align-items: flex-start;
            gap: .8rem;
        }
    }

    .act-box .num {
        aspect-ratio: 100/87;
        height: 5rem;
        background-image: url('/wp-content/themes/report/assets/img/obog/student/deco-bubble.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        color: var(--student-blue-color);
        font-weight: 500;
        display: inline-flex;
        align-items: baseline;
        justify-content: center;
        gap: .2em;
        line-height: 5.8rem;

        @media screen and (max-width:600px) {
            height: 3rem;
            align-items: baseline;
            line-height: 3.7rem;
            font-size: .7rem;
        }
    }

    .act-box .num span {
        font-size: 2.2rem;
        font-weight: 600;
        padding-right: .6rem;
        line-height: 1;

        @media screen and (max-width:600px) {
            font-size: 1.4rem;
        }
    }

    .act-box p {
        @media screen and (max-width: 600px) {
            margin: 0 !important;
            width: 100% !important;
        }
    }

    .act-box p br {
        @media screen and (max-width: 320px) {
            display: none;
        }
    }

    .act-box figure {
        position: absolute;
        width: 20%;

        @media screen and (max-width: 600px) {
            width: 40vw !important;
        }
    }

    .act-box figure img {
        mask-size: contain;
        mask-repeat: no-repeat;
    }

    .act-box.act1 figure.image-a {
        width: 18%;
        top: 0;
        left: max(55%, 426px);

        @media screen and (max-width: 820px) {
            top: 40px;
        }

        @media screen and (max-width: 600px) {
            left: 20px !important;
        }
    }

    .act-box.act1 figure.image-b {
        width: 14%;
        top: 0;
        right: 0;
        @media screen and (max-width: 600px) {
            position: absolute;
            width: 25vw !important;
            bottom: -20px !important;
            right: 40px !important;
        }
    }

    .act-box.act3 figure.image-a {
        width: 30%;
        bottom: 0;
        left: 0;

        @media screen and (max-width: 600px) {
            align-self: center;
            right: 40px !important;
        }
    }

    .act-box.act4 figure.image-a {
        width: 15%;
        top: -40px;
        left: 380px;

        @media screen and (max-width: 600px) {
            align-self: flex-end;
        }
    }

    .act-box.act5 figure.image-a {
        width: 38%;
        right: calc((100vw - 1040px)/8*-1);
        bottom: 0;

        @media screen and (max-width: 1024px) {
            max-width: 250px;
        }

        @media screen and (max-width: 820px) {
            width: 34%;
            bottom: 60px;
        }

        @media screen and (max-width: 600px) {
            align-self: center;
        }
    }

    .act-box.act6 figure.image-a {
        width: 22%;
        top: -120px;
        right: calc((100vw - 1040px)/4*-1);

        @media screen and (max-width: 1024px) {
            right: calc(((100vw - 100px) - ((100vw - 100px)*.85))/4*-1);
        }

        @media screen and (max-width: 820px) {
            top: -150px;
        }

        @media screen and (max-width: 600px) {
            left: 20px !important;
        }
    }

    .act-box.act6 figure.image-b {
        width: 32%;
        bottom: 0;
        left: 40px;

        @media screen and (max-width: 1024px) {
            left: 0;
        }

        @media screen and (max-width: 600px) {
            position: absolute;
            width: 25vw !important;
            bottom: -20px !important;
            right: 40px !important;
        }
    }

    .act-box.act7 figure.image-a {
        width: 18%;
        right: 0;
        bottom: 20px;

        @media screen and (max-width: 600px) {
            width: 30% !important;
            left: 20px !important;
            top: 20px !important;
        }
    }

    .act-box.act7 figure.image-b {
        width: 20%;
        right: 340px;
        top: calc(100% + 60px);

        @media screen and (max-width: 600px) {
            align-self: flex-end;
            transform: translateY(-80%);
        }
    }

    .act-box.act7 figure.image-c {
        width: 16%;
        left: 0;
        top: calc(100% + 120px);

        @media screen and (max-width: 820px) {
            top: calc(100% + 180px);
            left: 40px;
        }

        @media screen and (max-width: 600px) {
            position: absolute;
            bottom: 0 !important;
            left: 28vw !important;
            width: 33vw !important;
        }
    }

    .act-box.act8 figure.image-a {
        width: 30%;
        top: calc(100% + 40px);
        right: 40px;

        @media screen and (max-width: 600px) {
            position: absolute;
            top: 100% !important;
            right: 0 !important;
            transform: translateY(-30%);
            width: 38% !important;
        }

        @media screen and (max-width: 320px) {
            transform: unset;
        }
    }

    /* deco */
    .act-box figure {
        @media screen and (max-width: 600px) {
            position: relative;
            left: unset !important;
            right: unset !important;
            top: unset !important;
            bottom: unset !important;
        }
    }

    .act-box figure img {
        mask-image: url('/wp-content/themes/report/assets/img/obog/student/mask02.svg');
        mask-size: contain;
    }

    .act-box.act1 figure.image-a img,
    .act-box.act3 figure.image-a img,
    .act-box.act7 figure.image-a img {
        mask-image: url('/wp-content/themes/report/assets/img/obog/student/mask02.svg');
    }

    .act-box.act1 figure.image-b img,
    .act-box.act4 figure.image-a img,
    .act-box.act5 figure.image-a img {
        mask-image: url('/wp-content/themes/report/assets/img/obog/student/mask01.svg');
    }

    .act-box.act6 figure.image-a img,
    .act-box.act8 figure.image-a img {
        mask-image: url('/wp-content/themes/report/assets/img/obog/student/mask03.svg');
    }

    .act-box.act6 figure.image-b img,
    .act-box.act7 figure.image-b img {
        mask-image: url('/wp-content/themes/report/assets/img/obog/student/mask04.svg');
    }

    :is(.act-box.act2, .act-box.act2 .h3-box, .act-box.act4, .act-box.act7)::before,
    :is(.act-box.act2, .act-box.act5, .act-box.act7)::after {
        content: "";
        display: block;
        height: 160px;
        position: absolute;
        background-size: contain;
        background-repeat: no-repeat;

        @media screen and (max-width: 600px) {
            height: 120px;
        }
    }

    .act-box figure img,
    .heading-box .img img {
        transform: scale(0);
        transition: 1s cubic-bezier(0.13, 1.13, 0.36, 1);
    }

    .act-box.is-scrolled figure img,
    .heading-box.is-scrolled .img img {
        transform: scale(1);
    }

    .act-box.act2 .h3-box::before {
        aspect-ratio: 167/568;
        background-image: url('/wp-content/themes/report/assets/img/obog/about-act2-deco1.png');
        top: -20px;
        right: 125%;
    }

    .act-box.act2::before {
        aspect-ratio: 415/600;
        right: 8%;
        top: calc(100% + 60px);
        background-image: url('/wp-content/themes/report/assets/img/obog/about-act2-deco2.png');

        @media screen and (max-width: 1024px) {
            right: 0;
        }

        @media screen and (max-width: 820px) {
            right: -4%;
        }

        @media screen and (max-width: 600px) {
            right: 0;
            top: 0;
        }
    }

    .act-box.act2::after {
        aspect-ratio: 37/41;
        height: 100px;
        right: calc(360px * 1.25 + 160px*167/568 + 40px);
        bottom: 20px;
        background-image: url('/wp-content/themes/report/assets/img/obog/student/deco-icon1.svg');

        @media screen and (max-width: 820px) {
            right: unset;
            left: -4%;
        }

        @media screen and (max-width: 600px) {
            right: 20px;
            left: unset;
            bottom: unset;
            top: calc(100% + 40px);
            height: 80px;
        }
    }

    .act-box.act4::before {
        aspect-ratio: 229/600;
        left: 14%;
        top: calc(100% + 40px);
        background-image: url('/wp-content/themes/report/assets/img/obog/about-act4-deco1.png');

        @media screen and (max-width: 820px) {
            left: -2%;
        }

        @media screen and (max-width: 600px) {
            left: unset;
            right: 20px;
            top: -100px;
        }
    }

    .act-box.act5::after {
        aspect-ratio: 38/44;
        height: 100px;
        left: calc(100% - 38%);
        bottom: calc(940px*.34);
        background-image: url('/wp-content/themes/report/assets/img/obog/student/deco-icon2.svg');
        z-index: 2;

        @media screen and (max-width: 1024px) {
            left: calc(100% - 30%);
            bottom: calc(940px*.28);
        }

        @media screen and (max-width: 820px) {
            left: unset;
            right: 0;
            bottom: calc(940px*.22);
        }

        @media screen and (max-width: 600px) {
            left: unset;
            right: 10px;
            bottom: unset;
            height: 80px;
        }
    }

    .act-box.act7::before {
        aspect-ratio: 168/600;
        left: 5%;
        top: 0;
        background-image: url('/wp-content/themes/report/assets/img/obog/about-act7-deco1.png');

        @media screen and (max-width: 600px) {
            top: 80%;
        }
    }

    .act-box.act7::after {
        aspect-ratio: 42/29;
        height: 80px;
        right: calc(340px + 20% + 40px);
        top: calc(100% + 60px);
        background-image: url('/wp-content/themes/report/assets/img/obog/student/deco-icon3.svg');
        z-index: 1;

        @media screen and (max-width: 600px) {
            right: 2%;
            top: calc(100% - 20px);
            height: 50px;
        }
    }

    .act-box.act9::before {
        content: "";
        display: block;
        width: 100vw;
        height: 100vh;
        background: #FAF9E7;
        position: absolute;
        left: 0;
        top: -40px;
        margin: 0 calc(50% - 50vw);
        z-index: -1;

        @media screen and (max-width: 600px) {
            top: -20px;
        }
    }

    .sec-report-wrap::after {
        bottom: 0;
        right: 0;
        aspect-ratio: 311/442;
        width: 24vw;
        background-image: url('/wp-content/themes/report/assets/img/obog/student/deco-bg3.png');
        z-index: 1;

        @media screen and (max-width: 820px) {
            width: 30vw;
        }
    }

    svg.about-sp-line {
        display: none;

        @media screen and (max-width: 600px) {
            display: block;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100vw;
            margin: 0 calc(50% - 50vw);
            z-index: -1;
        }
    }

    :is(.act-box.act2, .act-box.act8, .act-box.act9) svg.about-sp-line {
        display: none;
    }

    .act-box.act7 svg.about-sp-line {
        bottom: 120px;
    }

    svg.about-sp-line use {
        fill: none;
        stroke: var(--student-yellow-color);
        transform: translateY(-16px);
    }

}