@charset "utf-8";


/**
 * スマホ用設定
 */
@media ( width < 768px ) {

    body {
        background: url(../images/page-bg.webp) no-repeat fixed center / cover, #0184b7;
    }

    main {
        margin: 0 auto;
        padding: calc( 80px + 12.0vw ) 0 12.0vw;
        width: 100%;
    }

    #past-program {
        margin: 0 auto;
        padding: 12.0vw 0 0;
        width: 100%;
    }
    #past-program .past-program-box {
        position: relative;
        margin: 0 auto;
        padding: 12.0vw 4% 12.0vw;
        width: 90%;
        background: #fff;
        border: 1.0vw solid #c47900;
        container-type: inline-size;
    }
    #past-program .past-program-box .head {
        position: absolute;
        top: 0;
        left: 12%;
        margin: 0;
        padding: 2.0cqw 0;
        width: 76%;
        height: auto;
        background: #c47900;
        translate: 0 -50%;
    }
    #past-program .past-program-box .head::before {
        position: absolute;
        content: "";
        top: 0;
        right: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(66%) scale( 1.5, 1.5 );
    }
    #past-program .past-program-box .head::after {
        position: absolute;
        content: "";
        top: 0;
        left: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(-66%) scale( -1.5, 1.5 );
    }
    #past-program .past-program-box .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 60%;
        height: auto;
    }
    #past-program .past-program-box .date {
        margin: 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
    }
    #past-program .past-program-box .title {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 6.0vw;
        font-weight: 500;
        text-align: center;
    }
    #past-program .past-program-box iframe {
        display: block;
        margin: 8.0vw 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
    }
    #past-program .past-program-box .pic {
        margin: 8.0vw 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    #past-program .past-program-box .pic:empty {
        background: #f0f0f0;
    }
    #past-program .past-program-box .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #past-program .past-program-box .desc {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 600;
        text-align: left;
    }
    #past-program .past-program-box .useful-links {
        margin: 8.0vw 0 0;
        padding: 8.0vw 0 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        border-top: 2px solid #c47900;
        transition: opacity 0.3s ease-out;
    }
    #past-program .past-program-box .useful-link {
        position: relative;
        display: block;
        margin: 4.0vw auto 0;
        padding: 1.0em 0;
        width: 100%;
        color: #fff;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        background: #e42929;
        border-radius: 4.0em;
    }
    #past-program .past-program-box .useful-link::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 2.0em;
        width: 1.0em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        clip-path: polygon( 0 0, 100% 50%, 0 100% );
    }
    @media ( hover: hover ) {
        #past-program .past-program-box .useful-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }
    #past-program .common-link {
        position: relative;
        display: block;
        margin: 8.0vw auto 0;
        padding: 1.0em 0;
        width: 81%;
        color: #4f4f4f;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
        background: #fff;
        border-radius: 4.0em;
    }
    #past-program .common-link::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        left: 2.0em;
        width: 1.0em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #4f4f4f;
        clip-path: polygon( 0 50%, 100% 0, 100% 100% );
    }
    @media ( hover: hover ) {
        #past-program .common-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }

}


/**
 * PC用設定
 */
@media ( width >= 768px ) {

    body {
        background: url(../images/page-bg.webp) no-repeat fixed center / cover, #0184b7;
    }

    main {
        margin: 0 auto;
        padding: 180px 0 80px;
        width: 100%;
    }

    #past-program {
        margin: 0 auto;
        padding: 80px 0 0;
        width: 100%;
    }
    #past-program .past-program-box {
        position: relative;
        margin: 0 auto;
        padding: 100px 10%;
        width: 90%;
        max-width: 1200px;
        background: #fff;
        border: 7px solid #c47900;
        container-type: inline-size;
    }
    #past-program .past-program-box .head {
        position: absolute;
        top: 0;
        left: 25%;
        margin: 0;
        padding: 2.0cqw 0;
        width: 50%;
        height: auto;
        background: #c47900;
        translate: 0 -50%;
    }
    #past-program .past-program-box .head::before {
        position: absolute;
        content: "";
        top: 0;
        right: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(66%) scale( 1.5, 1.5 );
    }
    #past-program .past-program-box .head::after {
        position: absolute;
        content: "";
        top: 0;
        left: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca1.svg) no-repeat center / contain;
        transform: translateX(-66%) scale( -1.5, 1.5 );
    }
    #past-program .past-program-box .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 40%;
        height: auto;
    }
    #past-program .past-program-box .date {
        margin: 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
    }
    #past-program .past-program-box .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 32px;
        font-weight: 500;
        text-align: center;
    }
    #past-program .past-program-box iframe {
        display: block;
        margin: 40px 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
    }
    #past-program .past-program-box .pic {
        margin: 40px 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    #past-program .past-program-box .pic:empty {
        background: #f0f0f0;
    }
    #past-program .past-program-box .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #past-program .past-program-box .desc {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
    }
    #past-program .past-program-box .useful-links {
        margin: 60px 0 0;
        padding: 60px 0 0;
        width: 100%;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        border-top: 2px solid #c47900;
    }
    #past-program .past-program-box .useful-link {
        position: relative;
        display: block;
        margin: 20px auto 0;
        padding: 1.0em 0;
        width: 80%;
        max-width: 700px;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        background: #e42929;
        border-radius: 4.0em;
        transition: opacity 0.3s ease-out;
    }
    #past-program .past-program-box .useful-link::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        right: 2.0em;
        width: 1.0em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #fff;
        clip-path: polygon( 0 0, 100% 50%, 0 100% );
    }
    @media ( hover: hover ) {
        #past-program .past-program-box .useful-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }
    #past-program .common-link {
        position: relative;
        display: block;
        margin: 40px auto 0;
        padding: 1.0em 0;
        width: calc( 0.8 * 0.8 * min( 90.0vw, 1200px ) );
        max-width: 700px;
        color: #4f4f4f;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        background: #fff;
        border-radius: 4.0em;
        transition: opacity 0.3s ease-out;
    }
    #past-program .common-link::after {
        position: absolute;
        content: "";
        top: calc( 50% - 0.5em );
        left: 2.0em;
        width: 1.0em;
        height: auto;
        aspect-ratio: 1 / 1;
        background: #4f4f4f;
        clip-path: polygon( 0 50%, 100% 0, 100% 100% );
    }
    @media ( hover: hover ) {
        #past-program .common-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }

}