@charset "UTF-8";

/* header-home
---------------------------------------------------*/
#header-home {
    padding-top: 50px;
    margin-bottom: 48px;
    overflow: hidden;
}
#header-home .header-home-inner {
    position: relative;
    width: 96.25%;
    max-width: 1600px;
    margin: 0 auto;
    z-index: 1;
}
#header-home .header-home-inner::before {
    position: absolute;
    content: '';
    top: -50px;
    left: 8.60%;
    width: calc(100vw - 8.60%);
    height: 166px;
    background-color: var(--main-color);
    z-index: -1;
}
#header-home .main-title-wrap {
    position: absolute;
    top: 12.5%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 47.0779%;
    z-index: 20;
}
#header-home .main-title-wrap .main-title {
    width: 100%;
    margin-bottom: 54px;
}
#header-home .main-title-wrap .main-title img {
    width: 100%;
}
#header-home .main-title-wrap .on-air {
    text-align: center;
    margin-bottom: 12px;
}
#header-home .main-title-wrap .navigator {
    text-align: center;
}
#header-home .main-title-wrap .on-air span,
#header-home .main-title-wrap .navigator span {
    display: inline-block;
    color: var(--main-color);
    background-color: var(--white-color);
    padding: 0.1em 0.8em;
}
#header-home .main-title-wrap .on-air span {
    font-size: var(--font-size-en-m);
}
#header-home .main-title-wrap .navigator span {
    font-size: var(--font-size-en-n);
}
#header-home .main-title-wrap .navigator span b {
    font-size: var(--font-size-en-m);
    font-weight: 400;
}
#header-home .visual {
    position: relative;
    width: 100%;
    z-index: 10;
}
#header-home .visual img {
    width: 100%;
}
#header-home .visual::after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 98.37%;
    height: 97.2222%;
    border: 3px solid var(--white-color);
}

/* 768 */
@media screen and (max-width: 768px) {
    #header-home {
        padding-top: 5.2631vw;
        margin-bottom: 8.4210vw;
    }
    #header-home .header-home-inner {
        max-width: 91.5789vw;
    }
    #header-home .header-home-inner::before {
        top: -5.2631vw;
        left: 21.0526vw;
        width: 78.9473vw;
        height: 43.6842vw;
    }
    #header-home .main-title-wrap {

        width: 82.41%;
        top: 15.7894vw;
    }
    #header-home .main-title-wrap .main-title {
        margin-bottom: 7.3684vw;
    }
    #header-home .main-title-wrap .on-air {
        margin-bottom: 2.1052vw;
    }
    #header-home .main-title-wrap .on-air span,
    #header-home .main-title-wrap .navigator span {
        padding: 0.1em 0.8em;
    }
    #header-home .main-title-wrap .on-air span {
        font-size: var(--font-size-en-n);
    }
    #header-home .main-title-wrap .navigator span {
        font-size: var(--font-size-en-s);
    }
    #header-home .visual::after {
        width: 96.70%;
    }
}


/* on-air-information
---------------------------------------------------*/
#on-air-information {
    margin-bottom: 80px;
}

/* 768 */
@media screen and (max-width: 768px) {
    #on-air-information {
        margin-bottom: 14.7368vw;
    }
}


/* sns-wrapper
---------------------------------------------------*/
.sns-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 96%;
    max-width: 980px;
    margin: 0 auto 96px;
}

/* 768 */
@media screen and (max-width: 768px) {
    .sns-wrapper {
        display: block;
        width: 95.7894vw;
        margin-bottom: 14.7368vw;
    }
}


/* sns-x
---------------------------------------------------*/
#sns-x {
    width: 48.97%;
}
#sns-x .title {
    text-align: center;
    margin-bottom: 24px;
}
#sns-x .title img {
    width: 48px;
}
#sns-x .sns-x-block {
    width: 100%;
    max-width: 480px;
    min-height: 480px;
    margin: 0 auto;
}

/* 768 */
@media screen and (max-width: 768px) {
    #sns-x {
        width: 100%;
    }
    #sns-x .title {
        margin-bottom: 6.3157vw;
    }
    #sns-x .title img {
        width: 12.6315vw;
    }
    #sns-x .sns-x-block {
        max-width: 95.7894vw;
        min-height: 95.7894vw;
        overflow: hidden;
    }
}


/* sns-instagram
---------------------------------------------------*/
#sns-instagram {
    width: 48.97%;
}
#sns-instagram .title {
    text-align: center;
    margin-bottom: 24px;
}
#sns-instagram .title img {
    width: 48px;
}
#sns-instagram .sns-instagram-block {
    width: 100%;
    border-radius: 16px;
    background-color: var(--white-color);
    padding: 10px;
    margin: 0 auto;
}
#sns-instagram .sns-instagram-block .photo-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#sns-instagram .sns-instagram-block .photo-list ul li {
    width: 32.17%;
    background-image: url('../img/top/instagram_bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;

}
#sns-instagram .sns-instagram-block .photo-list ul li:nth-child(-n+6) {
    margin-bottom: 8px;
}
#sns-instagram .sns-instagram-block .photo-list ul li img {
    display: block;
    width: 100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
/* hover */
#sns-instagram .sns-instagram-block .photo-list ul li a {
    display: block;
    overflow: hidden;
}
#sns-instagram .sns-instagram-block .photo-list ul li a:hover img {
    transform: scale(1.06);
}

/* 768 */
@media screen and (max-width: 768px) {
    #sns-instagram {
        width: 100%;
        margin-top: 6.3157vw;
    }
    #sns-instagram .title {
        text-align: center;
        margin-bottom: 6.3157vw;
    }
    #sns-instagram .title img {
        width: 12.6315vw;
    }
    #sns-instagram .sns-instagram-block {
        max-width: 95.7894vw;
        border-radius: 4.2105vw;
        padding: 2.1052vw;
    }
    #sns-instagram .sns-instagram-block .photo-list ul li {
        border-radius: 2.1052vw;
    }
    #sns-instagram .sns-instagram-block .photo-list ul li:nth-child(-n+6) {
        margin-bottom: 1.5789vw;
    }
}


/* message-to-studio
---------------------------------------------------*/
#message-to-studio {
    width: 96%;
    max-width: 1220px;
    background-color: var(--white-color);
    padding: 64px 32px 96px;
    margin: 0 auto 96px;
}
#message-to-studio .msg {
    line-height: 1.35em;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}

/* 768 */
@media screen and (max-width: 768px) {
    #message-to-studio {
        width: 95.78947vw;
        padding: 10.5263vw 0 14.7368vw;
        margin-bottom: 14.7368vw;
    }
    #message-to-studio .msg {
        line-height: 1.8em;
        margin-bottom: 6.3157vw;
    }
}


/* about-program
---------------------------------------------------*/
#about-program {
    position: relative;
    width: 100%;
    padding-top: 230px;
    overflow: hidden;
}
#about-program .visual-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}
#about-program .visual {
    position: absolute;
    top: 30px;
    right: 0;
    max-width: 1600px;
    width: 98.125%;
    height: 320px;
    z-index: 10;
}
#about-program .visual img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 320px;
}
#about-program .visual::before {
    position: absolute;
    content: '';
    top: -30px;
    left: -8.44%;
    width: 91.56%;
    height: 51.875%;
    background-color: var(--main-color);
    z-index: -1;
}
#about-program .visual img {
    width: 100%;
}
#about-program .about-program-inner {
    position: relative;
    width: 96%;
    max-width: 1100px;
    background-color: rgba(244, 244, 245, 0.9);
    border: 2px solid var(--main-color);
    padding: 8px;
    margin: 0 auto;
    z-index: 20;
}
#about-program .about-program-border {
    width: 100%;
    border: 8px solid var(--main-color);
    padding: 64px 32px;
}
#about-program .phrase {
    text-align: center;
    margin-bottom: 50px;
}
#about-program .phrase p {
    position: relative;
    display: inline-block;
}
#about-program .phrase p::before,
#about-program .phrase p::after {
    position: absolute;
    content: '';
    width: 24px;
    height: 36px;
    background-color: var(--point-color);
    z-index: 1;
}
#about-program .phrase p::before {
    top: -3px;
    left: -3px;
}
#about-program .phrase p::after {
    bottom: -3px;
    right: -3px;
}
#about-program .phrase p span {
    position: relative;
    display: inline-block;
    color: var(--point-color);
    font-size: var(--font-size-x);
    font-weight: bold;
    letter-spacing: 0.06em;
    background-color: #F0F0F0;
    padding: 0.2em 1em;
    z-index: 2;
}
#about-program .navigator-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 828px;
    margin: 0 auto;
}
#about-program .navigator-wrap .navigator {
    width: 33.81%;
}
#about-program .navigator-wrap .navigator .photo {
    width: 100%;
    text-align: center;
    background-color: var(--white-color);
    border: 1px solid var(--main-color);
    padding: 8px;
    margin-bottom: 16px;
}
#about-program .navigator-wrap .navigator .photo img {
    width: 100%;
}
#about-program .navigator-wrap .navigator .name {
    text-align: center;
    font-size: var(--font-size-ll);
    font-weight: bold;
    letter-spacing: 0.06em;
}
#about-program .navigator-wrap .navigator .name .title {
    display: inline-block;
    font-size: var(--font-size-s);
    margin-bottom: 8px;
}
#about-program .navigator-wrap .lead {
    width: 60.38%;
    padding-top: 5em;
}
#about-program .navigator-wrap .lead p {
    line-height: 2em;
    font-size: var(--font-size-m);
    margin-bottom: 0;
}
#about-program .navigator-wrap .lead p:not(:last-of-type) {
    margin-bottom: 2em;
}

/* 830 */
@media screen and (max-width: 830px) {
    #about-program .navigator-wrap {
        align-items: center;
    }
    #about-program .navigator-wrap .lead {
        padding-top: 0;
    }
}

/* 768 */
@media screen and (max-width: 768px) {
    #about-program {
        padding-top: 31.5789vw;
    }
    #about-program .visual {
        top: 5.2631vw;
        left: 0;
        right: auto;
        width: 100%;
        height: auto;
    }
    #about-program .visual img {
        object-fit: none;
        width: 100%;
        height: auto;
    }
    #about-program .visual::before {
        top: -5.2631vw;
        left: -21.0526vw;
        width: 100%;
        height: 43.6842vw;
    }
    #about-program .about-program-inner {
        width: 95.7894vw;
        padding: 1.5789vw;
    }
    #about-program .about-program-border {
        border-width: 1.0526vw;
        padding: 8.9473vw 4.7368vw 13.1578vw;
    }
    #about-program .phrase {
        margin-bottom: 8.4210vw;
    }
    #about-program .phrase p::before,
    #about-program .phrase p::after {
        width: 6.3157vw;
        height: 9.4736vw;
    }
    #about-program .phrase p::before {
        top: -0.5263vw;
        left: -0.5263vw;
    }
    #about-program .phrase p::after {
        bottom: -0.5263vw;
        right: -0.5263vw;
    }
    #about-program .phrase p span {
        line-height: 1.6em;
        font-size: var(--font-size-m);
        padding: 0.2em 1em;
    }
    #about-program .navigator-wrap {
        display: block;
    }
    #about-program .navigator-wrap .navigator {
        width: 100%;
        margin-bottom: 6.3157vw;
    }
    #about-program .navigator-wrap .navigator .photo {
        width: 54.7368vw;
        padding: 1.5789vw;
        margin: 0 auto 4.2105vw;
    }
    #about-program .navigator-wrap .navigator .photo img {
    }
    #about-program .navigator-wrap .navigator .name .title {
        margin-bottom: 1.3157vw;
    }
    #about-program .navigator-wrap .lead {
        width: 100%;
    }
    #about-program .navigator-wrap .lead p {
        line-height: 1.6em;
        font-size: var(--font-size-n);
        margin-bottom: 0;
    }
    #about-program .navigator-wrap .lead p:not(:last-of-type) {
        margin-bottom: 1.6em;
    }
}


/* gigyaShare
---------------------------------------------------*/
#gigyaShare {
    margin-top: 96px;
}

/* 768 */
@media screen and (max-width: 768px) {
    #gigyaShare {
        margin-top: 16.8421vw;
    }
}