@charset "utf-8";


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

    body {
        background: url(../images/top-bg-sp.webp) no-repeat fixed center / cover;
    }

    #mv {
        margin: 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 750 / 1336;
        overflow: hidden;
    }
    #mv .mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 750 / 1336;
    }
    #mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #mv .mv-samurai {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-samurai img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-logo {
        position: absolute;
        bottom: 15%;
        left: 15%;
        margin: 0;
        padding: 0;
        width: 70%;
        height: auto;
    }
    #mv .mv-logo img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-subtitle {
        position: absolute;
        bottom: 2%;
        left: 5%;
        width: 90%;
        height: auto;
    }
    #mv .mv-subtitle img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }

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

    #information {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
        background: url(../images/main-bg1.webp) no-repeat center / cover;
    }

    #summary {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
    }
    #summary .pic {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        height: auto;
    }

    #this-week {
        margin: 0 auto;
        padding: 12.0vw 0;
        width: 100%;
    }
    #this-week .this-week-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;
    }
    #this-week .this-week-box .head {
        position: absolute;
        top: 0;
        left: 12%;
        margin: 0;
        padding: 2.0cqw 0;
        width: 76%;
        height: auto;
        background: #c47900;
        translate: 0 -50%;
    }
    #this-week .this-week-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 );
    }
    #this-week .this-week-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 );
    }
    #this-week .this-week-box .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 60%;
        height: auto;
    }
    #this-week .this-week-box .date {
        margin: 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: center;
    }
    #this-week .this-week-box .title {
        margin: 0.5em 0 0;
        padding: 0;
        width: 100%;
        font-size: 6.0vw;
        font-weight: 500;
        text-align: center;
    }
    #this-week .this-week-box iframe {
        display: block;
        margin: 8.0vw 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
    }
    #this-week .this-week-box .desc {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 600;
        text-align: left;
    }
    #this-week .this-week-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;
    }
    #this-week .this-week-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;
    }
    #this-week .this-week-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 ) {
        #this-week .this-week-box .useful-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }

    #next-week {
        margin: 0 auto;
        padding: 8.0vw 0;
        width: 100%;
        background: #505050;
    }
    #next-week .next-week-box {
        position: relative;
        margin: 0 auto;
        padding: 6.0vw 4%;
        width: 90%;
        background: #ebebeb;
        border: 1.0vw solid #c47900;
    }
    #next-week .next-week-box::before {
        position: absolute;
        content: "";
        top: -4.0vw;
        left: -2.0vw;
        margin: 0;
        padding: 0;
        width: 25%;
        height: auto;
        aspect-ratio: 892 / 871;
        background: url(../images/icon-next.webp) no-repeat center / contain;
    }
    #next-week .next-week-box .date {
        margin: 0 auto;
        padding: 0.5em 0;
        width: 75%;
        color: #fff;
        font-size: 4.8vw;
        font-weight: 500;
        text-align: center;
        background: #c47900;
    }
    #next-week .next-week-box .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 4.0vw;
        font-weight: 500;
        text-align: center;
    }
    #next-week .next-week-box .pic {
        display: block;
        margin: 4.0vw 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 327 / 184;
        border: 0;
    }
    #next-week .next-week-box .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #next-week .next-week-box .desc {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 3.6vw;
        font-weight: 600;
        text-align: left;
    }

    #past {
        margin: 0 auto;
        padding: 12.0vw 0 8.0vw;
        width: 100%;
        background: url(../images/main-bg2.webp) no-repeat center / cover;
    }
    #past .past-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        container-type: inline-size;
    }
    #past .head {
        position: relative;
        margin: 0 auto;
        padding: 2.0cqw 0;
        width: 80%;
        height: auto;
        background: #fff;
    }
    #past .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 60%;
        height: auto;
    }
    #past .head::before {
        position: absolute;
        content: "";
        top: 0;
        right: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca2.svg) no-repeat center / contain;
        transform: translateX(66%) scale( 1.5, 1.5 );
    }
    #past .head::after {
        position: absolute;
        content: "";
        top: 0;
        left: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca2.svg) no-repeat center / contain;
        transform: translateX(-66%) scale( -1.5, 1.5 );
    }
    #past .past-grid {
        margin: 8.0vw auto;
        padding: 0;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 2.0vw;
    }
    #past .past-grid .past-item {
        display: block;
        margin: 0;
        padding: 4.0vw;
        width: 100%;
        background: #fff;
        border: 1.0vw solid #e42929;
    }
    #past .past-grid .past-item .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9
    }
    #past .past-grid .past-item .pic:empty {
        background: #f0f0f0;
    }
    #past .past-grid .past-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #past .past-grid .past-item .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 4.0vw;
        font-weight: 600;
        text-align: left;
    }
    #past .past-grid .past-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 3.6vw;
        font-weight: 500;
        text-align: left;
    }
    #past .common-link {
        position: relative;
        display: block;
        margin: 8.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;
        transition: opacity 0.3s ease-out;
    }
    #past .common-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 .common-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }

}


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

    body {
        background: url(../images/top-bg-pc.webp) no-repeat fixed center / cover;
    }

    #mv {
        margin: 40px auto 0;
        width: 100%;
        height: auto;
        aspect-ratio: 2880 / 1952;
        overflow: hidden;
    }
    #mv .mv-bg {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-bg img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-samurai {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-samurai img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-logo {
        position: absolute;
        bottom: 15%;
        left: 30%;
        margin: 0;
        padding: 0;
        width: 40%;
        height: auto;
    }
    #mv .mv-logo img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }
    #mv .mv-subtitle {
        position: absolute;
        bottom: 2%;
        left: 25%;
        width: 50%;
        height: auto;
    }
    #mv .mv-subtitle img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
    }

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

    #information {
        margin: 0 auto;
        padding: 60px 0;
        width: 100%;
        background: url(../images/main-bg1.webp) no-repeat center / cover;
    }

    #summary {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #summary .pic {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 800px;
        height: auto;
    }

    #this-week {
        margin: 0 auto;
        padding: 80px 0;
        width: 100%;
    }
    #this-week .this-week-box {
        position: relative;
        margin: 0 auto;
        padding: 100px 10%;
        width: 90%;
        max-width: 1200px;
        background: #fff;
        border: 7px solid #c47900;
        container-type: inline-size;
    }
    #this-week .this-week-box .head {
        position: absolute;
        top: 0;
        left: 25%;
        margin: 0;
        padding: 2.0cqw 0;
        width: 50%;
        height: auto;
        background: #c47900;
        translate: 0 -50%;
    }
    #this-week .this-week-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 );
    }
    #this-week .this-week-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 );
    }
    #this-week .this-week-box .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 40%;
        height: auto;
    }
    #this-week .this-week-box .date {
        margin: 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
    }
    #this-week .this-week-box .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 32px;
        font-weight: 500;
        text-align: center;
    }
    #this-week .this-week-box iframe {
        display: block;
        margin: 40px 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border: 0;
    }
    #this-week .this-week-box .desc {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
    }
    #this-week .this-week-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;
    }
    #this-week .this-week-box .useful-link {
        position: relative;
        display: block;
        margin: 20px auto 0;
        padding: 1.0em 0;
        width: 80%;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        background: #e42929;
        border-radius: 4.0em;
        transition: opacity 0.3s ease-out;
    }
    #this-week .this-week-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 ) {
        #this-week .this-week-box .useful-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }

    #next-week {
        margin: 0 auto;
        padding: 60px 0;
        width: 100%;
        background: #505050;
    }
    #next-week .next-week-box {
        position: relative;
        margin: 0 auto;
        padding: 40px 10%;
        width: 90%;
        max-width: 980px;
        background: #ebebeb;
        border: 2px solid #c47900;
        container-type: inline-size;
    }
    #next-week .next-week-box::before {
        position: absolute;
        content: "";
        top: -3.0cqw;
        left: -3.0cqw;
        margin: 0;
        padding: 0;
        width: 25.0cqw;
        height: auto;
        aspect-ratio: 892 / 871;
        background: url(../images/icon-next.webp) no-repeat center / contain;
    }
    #next-week .next-week-box .date {
        margin: 0 auto;
        padding: 0.5em 0;
        width: 80%;
        color: #fff;
        font-size: 30px;
        font-weight: 500;
        text-align: center;
        background: #c47900;
    }
    #next-week .next-week-box .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 23px;
        font-weight: 500;
        text-align: center;
    }
    #next-week .next-week-box .pic {
        display: block;
        margin: 20px 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 327 / 184;
        border: 0;
    }
    #next-week .next-week-box .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #next-week .next-week-box .desc {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
    }

    #past {
        margin: 0 auto;
        padding: 100px 0 60px;
        width: 100%;
        background: url(../images/main-bg2.webp) no-repeat center / cover;
    }
    #past .past-wrap {
        margin: 0 auto;
        padding: 0;
        width: 90%;
        max-width: 980px;
        container-type: inline-size;
    }
    #past .head {
        position: relative;
        margin: 0 auto;
        padding: 2.0cqw 0;
        width: 60%;
        height: auto;
        background: #fff;
    }
    #past .head .text-head {
        margin: 0 auto;
        padding: 0;
        width: 40%;
        height: auto;
    }
    #past .head::before {
        position: absolute;
        content: "";
        top: 0;
        right: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca2.svg) no-repeat center / contain;
        transform: translateX(66%) scale( 1.5, 1.5 );
    }
    #past .head::after {
        position: absolute;
        content: "";
        top: 0;
        left: 100%;
        width: auto;
        height: 100%;
        aspect-ratio: 102 / 114;
        background: url(../images/icon-orca2.svg) no-repeat center / contain;
        transform: translateX(-66%) scale( -1.5, 1.5 );
    }
    #past .past-grid {
        margin: 60px auto;
        padding: 0;
        width: 90%;
        max-width: 980px;
        display: grid;
        grid-template-columns: repeat( 3, 1fr );
        gap: 10px;
    }
    #past .past-grid .past-item {
        display: block;
        margin: 0;
        padding: 24px;
        width: 100%;
        background: #fff;
        border: 4px solid #e42929;
    }
    #past .past-grid .past-item .pic {
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9
    }
    #past .past-grid .past-item .pic:empty {
        background: #f0f0f0;
    }
    #past .past-grid .past-item .pic img {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #past .past-grid .past-item .title {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        text-align: left;
    }
    #past .past-grid .past-item .date {
        margin: 1.0em 0 0;
        padding: 0;
        width: 100%;
        color: #e42929;
        font-size: 16px;
        font-weight: 500;
        text-align: left;
    }
    #past .common-link {
        position: relative;
        display: block;
        margin: 40px auto 0;
        padding: 1.0em 0;
        width: 80%;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        background: #e42929;
        border-radius: 4.0em;
        transition: opacity 0.3s ease-out;
    }
    #past .common-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 .common-link:hover {
            opacity: 0.5;
            filter: brightness( 100% );
        }
    }

}