body {
    font-family: NotoSansCJKjp, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
}

a {
    text-decoration: none;
    color: rgb(0, 0, 0);
}

li {
    list-style: none;
}

@media(min-width: 768px) {
    .btn-wrap {
        margin-top: 4rem;
        margin-left: -4.7rem;
    }
}

@media(max-width: 767px) {
    .btn-wrap {
        margin-top: 2rem;
    }
}

.gframe {
    max-width: 100%;
    border: solid 1px #777;
    display: block;
    margin: auto;
    margin-top: 2vw;
    margin-bottom: 5vw;
    height: 320px;
}

.button {
    margin-left: calc(50% - min(24.6vw, 6rem));
    font-size: min(4vw, 1rem);
    position: relative;
    background-color: rgb(0, 171, 254);
    border-radius: 16vw;
    color: rgb(255, 255, 255);
    font-weight: 700;
    box-shadow: rgb(0, 67, 255) 0rem 0.3rem 0rem 0rem;
    padding: 0.4rem min(10.9vw, 2.65rem) 0.22rem min(7vw, 1.7rem);
    letter-spacing: -0.08em;
}

.button:hover {
    opacity: 0.7;
}

.button:active {
    top: 0.3rem;
    box-shadow: none;
}

@media(max-width: 767px) {
    .button-keyword {
        margin-left: calc(50% - min(28.6vw, 7.3rem));
    }
    .button-detail {
        margin-left: calc(50% - min(20.6vw, 4.6rem));
    }
    .button-schedule {
        margin-left: calc(50% - min(26.4vw, 5.7rem));
    }
}

@media (min-width: 768px) {
    .button {
        margin-left: calc(50% - 11.2rem);
        font-size: 2rem;
        box-shadow: rgb(0, 67, 255) 0rem 0.6rem 0rem 0rem;
        padding: 0.6rem 4.5rem 0.65rem 3rem;
    }
    .button-detail {
        margin-left: calc(50% - 7.2rem);
    }
    .button-schedule {
        margin-left: calc(50% - 9.6rem);
    }
}

.button-icon {
    top: 28%;
    right: 6%;
    font-size: 0.8rem;
    position: absolute;
    content: "";
    color: rgb(0, 67, 255);
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    padding: 0.1rem 0.18rem 0rem 0.08rem;
}

@media (min-width: 768px) {
    .button-icon {
        font-size: 1.6rem;
        padding: 0.2rem 0.36rem 0rem 0.16rem;
        right: 8.5%;
        top: 30%;
    }
}

header {
    position: fixed;
    z-index: 999;
}

.header-menu {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: rgb(255, 167, 0);
    color: rgb(255, 255, 255);
    display: flex;
    height: calc(1.3vw + 2.44rem);
    justify-content: flex-start;
}

.hamburger-button>.bi.bi-list {
    position: fixed;
    margin-top: calc(((2.44rem + 1.3vw) * -24) / 100);
    font-size: calc((2.44rem + 1.3vw) * 0.54);
    left: 1.8%;
}

.header-logo {
    position: fixed;
    left: calc((100% - 8.1rem) / 2);
    width: calc(3.9vw + 7.18rem);
    margin-top: calc(0.61rem + 0.325vw);
}

.hamburger-list>ul {
    position: fixed;
    top: calc(1.3vw + 2.44rem);
    background-color: rgb(255, 167, 0);
    transform: translateX(-100%);
    transition: all 0.6s ease 0s;
    border-top: 0.125rem solid rgb(255, 255, 255);
    z-index: 999;
}

.hamburger-list>ul>li {
    font-size: calc((2.44rem + 1.3vw) / 2.44);
    font-weight: 700;
    border-bottom: 0.125rem solid rgb(255, 255, 255);
}

.hamburger-list>ul>li>a {
    display: block;
}

.hamburger-list>ul>li>a {
    color: rgb(255, 255, 255);
    padding: calc(1.22rem + 0.65vw) 4rem calc(1.22rem + 0.65vw) 2rem;
}

.hamburger-list>ul>li>a:hover {
    color: rgba(255, 255, 255, 0.5);
}

.hamburger-menu-active>ul {
    transform: translateX(0%);
}

.hamburger-menu-active>.hamburger-list-overlay {
    position: fixed;
    width: 100vw;
    height: 100vh;
}

.cover-image {
    width: 100%;
    margin-bottom: -1rem;
}

.information {
    background: url("./image/information-bg.png") 0% 0% / cover;
    padding: 1.9rem 1.725rem 1.3rem;
}

@media (min-width: 768px) {
    .information {
        padding-top: 4.8rem;
    }
}

.information-container {
    max-width: 29rem;
    margin-top: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    border: 0.125rem solid rgb(255, 167, 0);
    border-radius: 0.625rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .information-container {
        max-width: 63rem;
        border-radius: 1.6rem;
        border: 0.2rem solid rgb(255, 167, 0);
        margin-bottom: 2.1rem;
    }
}

.information-title {
    display: block;
    border-top-left-radius: 0.425rem;
    border-top-right-radius: 0.425rem;
    background-color: rgb(255, 167, 0);
    padding: 0.2rem 0rem 0.45rem;
    color: rgb(255, 255, 255);
    text-align: center;
    font-family: "M PLUS 1 Code", sans-serif;
    font-weight: 600;
}

@media (min-width: 768px) {
    .information-title {
        padding-bottom: 0.8rem;
        border-top-left-radius: 1.4rem;
        border-top-right-radius: 1.4rem;
    }
}

.information-title>.bi.bi-info-circle-fill,
.information-title>.bi.bi-question-circle-fill {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .information-title>.bi.bi-info-circle-fill,
    .information-title>.bi.bi-question-circle-fill {
        font-size: 2.3rem;
    }
}

.information-title-text {
    display: inline;
    font-size: 1.29rem;
}

@media (min-width: 768px) {
    .information-title-text {
        font-size: 1.9rem;
    }
}

.information-content {
    background-color: rgb(255, 255, 255);
    padding: 0.3rem 2.125rem 1.5rem;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.information-content.about {
    line-height: 1.2;
    padding: 3rem;
    font-size: 1.5rem;
}

.information-content ul {
    margin: 10px;
}

@media (min-width: 768px) {
    .information-content {
        padding-bottom: 3.4rem;
        border-bottom-left-radius: 1.3rem;
        border-bottom-right-radius: 1.3rem;
    }
}

@media (max-width: 768px) {
    .information-pc-container {
        max-width: 29rem;
    }
}

@media (min-width: 768px) {
    .information-pc-container {
        display: flex;
    }
}

.information-content-title {
    display: inline-block;
    background-color: rgb(255, 167, 0);
    color: rgb(255, 255, 255);
    padding: 0.3rem;
    font-weight: 500;
    font-family: "M PLUS 1 Code", sans-serif;
    margin-bottom: 0.25rem;
    margin-top: 0.5rem;
    font-size: 1rem;
}

@media (min-width: 768px) {
    .information-content-title.left {
        position: absolute;
        top: 1rem;
        left: -2.5rem;
        font-size: 1.75rem;
        padding: 0.7rem 1rem;
    }
    .information-content-title.right {
        position: absolute;
        top: -4.5rem;
        left: -2.7rem;
        font-size: 1.75rem;
        padding: 0.7rem 1rem;
    }
}

.information-date {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.3rem;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1.2;
    letter-spacing: 0.11em;
    color: rgb(51, 51, 51);
    text-align: center;
}

@media (min-width: 768px) {
    .information-date {
        letter-spacing: -0.06em;
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
}

.information-time {
    margin-left: 0.6rem;
    letter-spacing: calc(-0.073em);
}

@media (min-width: 768px) {
    .information-time {
        font-size: 1.75rem;
    }
}

.information-left {
    margin-bottom: -0.5rem;
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .information-left {
        position: relative;
        padding-top: 5.4rem;
        margin-bottom: 3.9rem;
    }
}

.information-entry-date {
    margin-top: 0.3rem;
    font-size: min(4.6vw, 1.125rem);
    text-align: center;
    margin-bottom: 0.4rem;
}

@media (min-width: 768px) {
    .information-entry-date {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
}

.information-right {
    margin-bottom: 1.1rem;
    max-width: 19rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .information-right {
        margin-top: 5.6rem;
        position: relative;
    }
}

.day-saturday,
.day-sunday {
    font-weight: 700;
    font-size: 0.95rem;
    color: rgb(255, 255, 255);
    border-radius: 50%;
    padding: 0.15rem 0.15rem 0rem 0.25rem;
    margin-left: 0.2rem;
}

@media (min-width: 768px) {
    .day-saturday,
    .day-sunday {
        font-size: 1.2rem;
        padding: 0.4rem 0.5rem 0.15rem;
        margin-top: -0.1rem;
    }
}

.day-saturday {
    background-color: rgb(0, 67, 255);
}

.day-sunday {
    background-color: rgb(255, 3, 0);
}

.information-hr {
    border: none;
    background-color: #fff;
    border-width: 1px 0 0 0;
    border-top: dashed;
    border-color: rgb(255, 167, 0);
    margin: 2rem 4rem;
}

@media(max-width: 767px) {
    .information-hr {
        margin: 1.4rem 0rem;
    }
}

.information-subtitle {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.3rem;
}

@media(max-width: 767px) {
    .information-subtitle {
        font-size: 1.3rem;
        margin-bottom: 0.3rem;
    }
}

.information-subtitle-caption {
    text-align: center;
    display: block;
    width: 100%;
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .schedule {
        margin: 2.4rem auto 1.5rem;
        padding-left: 2.4rem;
        padding-right: 1.7rem;
        max-width: 29rem;
    }
}

@media (min-width: 768px) {
    .schedule {
        position: relative;
        padding-bottom: 2.1rem;
    }
}

@media (max-width: 768px) {
    .schedule-curtain-top,
    .schedule-curtain-left,
    .schedule-curtain-right {
        display: none;
    }
}

@media (min-width: 768px) {
    .schedule-curtain-top,
    .schedule-curtain-left,
    .schedule-curtain-right {
        display: initial;
        position: absolute;
    }
    .schedule-curtain-top {
        width: 100vw;
        top: 0rem;
        z-index: 1;
    }
    .schedule-curtain-left,
    .schedule-curtain-right {
        width: 20vw;
        top: 10vw;
    }
    .schedule-curtain-left {
        left: 0rem;
        top: 2rem;
        width: 9vw;
    }
    .schedule-curtain-right {
        top: 2rem;
        right: 0rem;
        width: 7.9vw;
    }
}

@media (min-width: 768px) {
    .schedule-pc-container {
        padding-top: calc(19.4vw - 0.3125rem);
        width: 35rem;
        margin-left: calc(50% - 17.1rem);
        margin-right: auto;
        margin-bottom: 2.6rem;
    }
}

.schedule-title {
    width: 11.5rem;
    margin-left: calc(50% - 6.15rem);
    margin-bottom: 1.6rem;
}

@media (min-width: 768px) {
    .schedule-title {
        width: 28rem;
        margin-left: calc(50% - 14.4rem);
        margin-bottom: 5.2rem;
    }
}

.schedule-application {
    display: flex;
    column-gap: 1rem;
    margin-bottom: 1.4rem;
}

@media (min-width: 768px) {
    .schedule-application {
        margin-bottom: 4.2rem;
    }
}

.schedule-day {
    font-weight: 400;
    letter-spacing: -0.03em;
    font-size: min(4.6vw, 1.125rem);
}

@media (min-width: 768px) {
    .schedule-day {
        font-size: 2.4rem;
        margin-right: 2rem;
    }
}

.schedule-content {
    display: inline-block;
    font-weight: 600;
    font-size: 1.125rem;
    position: relative;
    background: linear-gradient(transparent 50%, rgb(255, 191, 78) 50%);
    letter-spacing: -0.08em;
}

@media (min-width: 768px) {
    .schedule-content {
        font-size: 2.25rem;
    }
    .schedule-content.break {
        margin-left: calc(50% - 2.2rem);
    }
}

.schedule-introduction {
    display: flex;
    margin-top: 0.3rem;
    align-items: center;
    max-width: 25rem;
    margin-bottom: 1.1rem;
}

@media (min-width: 768px) {
    .schedule-introduction {
        padding-right: 0rem;
        justify-content: flex-start;
    }
}

.schedule-introduction-image {
    width: min(30vw, 7.3rem);
    height: min(34vw, 8.2rem);
    margin-left: -0.6rem;
    margin-top: 0.4rem;
}

@media (min-width: 768px) {
    .schedule-introduction-image {
        width: 11.6rem;
        height: 13rem;
        margin-left: 0.3rem;
        margin-top: 0.5rem;
    }
}

.schedule-zoom-text {
    margin-left: -0.5rem;
    margin-top: 0.6rem;
    padding: 1.4rem 0.2rem 0.9rem 1.7rem;
    line-height: calc(1.42);
    letter-spacing: calc(-0.064em);
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}

@media (min-width: 768px) {
    .schedule-zoom-text {
        font-size: 1.3rem;
        line-height: 1.7;
        letter-spacing: -0.1em;
        margin-left: 0rem;
        margin-right: -7.9rem;
        margin-top: 0.4rem;
        height: 11rem;
        padding: 1.1rem 2rem 0rem 4.3rem;
        width: 35rem;
    }
}

.schedule-introduction-text {
    background: url("./image/introduction-frame_sp.svg") 0% 0% / cover;
    margin-left: -0.5rem;
    margin-top: 0.6rem;
    padding: 1.4rem 0.2rem 0.9rem 1.7rem;
    line-height: calc(1.42);
    letter-spacing: calc(-0.064em);
    border-top-right-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}

@media (min-width: 768px) {
    .schedule-introduction-text {
        font-size: 1.3rem;
        line-height: 1.7;
        letter-spacing: -0.1em;
        margin-left: 0rem;
        margin-right: -7.9rem;
        margin-top: 3.4rem;
        height: 11rem;
        padding: 1.1rem 2rem 0rem 4.3rem;
        width: 35rem;
    }
}

@media (max-width: 1079px) {
    .schedule-presentation-container {
        max-width: 31rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }
}

@media (min-width: 1080px) {
    .schedule-presentation-container {
        display: flex;
        max-width: 81.5rem;
        padding-left: 2rem;
        padding-right: 2rem;
        margin-right: auto;
        column-gap: 1.5rem;
        margin-left: auto;
    }
}

.schedule-presentation-headcaption {
    margin-top: 0.55rem;
    margin-bottom: 0.55rem;
    font-weight: 400;
    letter-spacing: calc(-0.08em);
    font-size: 1rem;
    color: rgb(21, 21, 21);
}

@media (min-width: 768px) {
    .schedule-presentation-headcaption {
        margin-top: 1.8rem;
        letter-spacing: calc(-0.09rem);
        text-align: center;
        font-size: 1.5rem;
        margin-bottom: 2.7rem;
    }
}

.schedule-presentation-item {
    max-width: 31rem;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    padding: 1rem 0.8rem;
    background-color: rgb(255, 255, 184);
    display: flex;
    flex-direction: row;
    column-gap: 0.4rem;
    border-radius: 0.625rem;
    margin-bottom: 0.9rem;
}

.schedule-presentation-item.reverse {
    background-color: rgb(254, 230, 184);
    flex-direction: row-reverse;
}

@media (min-width: 1080px) {
    .schedule-presentation-item,
    .schedule-presentation-item.reverse {
        flex-direction: column;
        width: calc(25% - 1.5rem);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        margin-bottom: 3rem;
    }
}

.schedule-presentation-image {
    width: min(28.9vw, 7.667rem);
    height: min(28.9vw, 7.667rem);
    border-radius: 100%;
    background: #fff;
}

@media (min-width: 1080px) {
    .schedule-presentation-image {
        width: 12rem;
        height: 12rem;
        margin-bottom: 1rem;
    }
}

.schedule-presentation-title {
    margin-top: 0.5rem;
    letter-spacing: -0.07em;
    color: rgb(51, 51, 51);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

@media (min-width: 1080px) {
    .schedule-presentation-title {
        font-size: 1.2rem;
        text-align: center;
        margin-bottom: 1rem;
    }
}

.schedule-presentation-text {
    font-size: 1rem;
    font-weight: 400;
    color: rgb(51, 51, 51);
    line-height: 1.3;
    letter-spacing: -0.07em;
}

@media (min-width: 1080px) {
    .schedule-presentation-text {
        font-size: 1.125rem;
        line-height: 1.55;
        letter-spacing: -0.07em;
        margin-bottom: 1rem;
    }
}

.schedule-content.inline {
    margin-bottom: 1rem;
    margin-top: 0.4rem;
}

@media(min-width: 768px) {
    .schedule-content.pc-center {
        margin-left: calc(50% - 3.75rem);
    }
}

.schedule-content-caption {
    letter-spacing: -0.06em;
    margin-top: 0.55rem;
    margin-bottom: 1.05rem;
    font-size: 1rem;
    color: rgb(0, 0, 0);
}

@media (min-width: 768px) {
    .schedule-content-caption {
        text-align: center;
        margin-top: 1.2rem;
        font-size: 1.6rem;
        letter-spacing: -0.09em;
        margin-bottom: 2.95rem;
    }
}

.schedule-content.before-box {
    margin: 0.1rem 0rem 0.9rem;
    display: inline-block;
}

@media (min-width: 1080px) {
    .schedule-afterbreak-container {
        display: flex;
    }
    .schedule-afterbreak-item>.schedule-presentation-item.afterbreak {
        width: calc(100% - 7rem);
    }
    .schedule-afterbreak-item>.schedule-presentation-item.schedule-presentation-item.reverse.afterbreak {
        padding-bottom: 2rem;
    }
}

@media (min-width: 768px) {
    .schedule-afterbreak-item {
        max-width: 25rem;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1280px) {
    .schedule-afterbreak-container {
        justify-content: center;
        column-gap: 11rem;
    }
    .schedule-afterbreak-item {
        margin-top: initial;
        margin-right: initial;
        margin-bottom: initial;
        margin-left: -6rem;
    }
    .schedule-afterbreak-item>.schedule-presentation-item.afterbreak {
        flex-direction: row;
        width: 33rem;
        padding-bottom: 1rem;
    }
    .schedule-afterbreak-item>.schedule-presentation-item.schedule-presentation-item.reverse.afterbreak {
        padding-bottom: 1rem;
    }
}

.shcedue-afterbreak-triangle {
    display: none;
}

@media (min-width: 1080px) {
    .shcedue-afterbreak-triangle {
        width: 4rem;
        display: initial;
    }
}

.attractive {
    background-color: rgb(255, 255, 0);
    padding: 2.6rem 2rem 2rem;
}

@media (min-width: 768px) {
    .attractive {
        padding-top: 3.2rem;
        padding-bottom: 5.7rem;
    }
}

.attractive-title {
    width: 16rem;
    margin-left: calc(50% - 8rem);
    margin-bottom: 1.7rem;
}

@media (min-width: 768px) {
    .attractive-title {
        width: min(21.85rem + 18vw, 43.7rem);
        margin-left: calc(50% - min(10.925rem + 9vw, 21.85rem));
        margin-bottom: 4.8rem;
    }
}

.attractive-container {
    max-width: 80.1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 960px) {
    .attractive-item-container {
        display: flex;
        padding-left: 0.2rem;
        column-gap: 5.4rem;
        padding-right: 0.8rem;
        margin-bottom: 3rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 56rem;
    }
}

.attractive-item {
    display: flex;
    flex-direction: row;
    column-gap: 0.9rem;
    align-items: center;
    margin-bottom: 0.6rem;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

.attractive-item.reverse {
    flex-direction: row-reverse;
}

@media (min-width: 960px) {
    .attractive-item,
    .attractive-item.reverse {
        width: 15rem;
    }
}

@media (min-width: 960px) {
    .attractive-item.reverse>.attractive-item-text>.attractive-item-title {
        margin-left: -6rem;
    }
    .attractive-item-title.friendly {
        margin-left: -2rem;
    }
}

@media (min-width: 960px) {
    .attractive-item-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .attractive-item.reverse>.attractive-item-text {
        margin-top: -1rem;
    }
    .attractive-item-text.friendly {
        margin-left: -1.3rem;
    }
}

.attractive-image {
    width: 7.8rem;
}

@media (min-width: 960px) {
    .attractive-image {
        display: none;
    }
}

@media (max-width: 960px) {
    .attractive-image-pc {
        display: none;
    }
}

@media (min-width: 960px) {
    .attractive-image-pc {
        width: 14rem;
        margin-bottom: 1.8rem;
    }
}

.attractive-item-title::before {
    content: "✓";
    font-weight: 700;
    font-size: 1.125rem;
    color: rgb(255, 165, 0);
    margin-right: 0.7rem;
}

@media (min-width: 960px) {
    .attractive-item-title::before {
        font-size: 2.5rem;
    }
}

.attractive-item-title {
    font-size: 1rem;
    color: rgb(51, 51, 51);
    margin-bottom: 0.5rem;
    letter-spacing: -0.06em;
}

@media (min-width: 960px) {
    .attractive-item-title {
        font-size: 1.9rem;
        white-space: nowrap;
        letter-spacing: -0.08em;
    }
}

.attractive-item-caption {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.36;
    letter-spacing: -0.06em;
}

@media (min-width: 960px) {
    .attractive-item-caption {
        padding-left: 0.5rem;
        width: 15rem;
    }
}

.attractive-movie {
    margin-top: 2.6rem;
    background-color: rgb(255, 255, 255);
    border-radius: 1.025rem;
    padding: 1rem 2.2rem;
}

@media (min-width: 768px) {
    .attractive-movie {
        padding: 2.3rem 11.75vw 4.4rem;
    }
}

.movie-title {
    margin-left: calc(50% - 4.125rem);
    width: 8.25rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .movie-title {
        width: min(9.15vw + 11rem, 22rem);
        margin-left: calc(50% - min(4.575vw + 5.5rem, 11rem));
        margin-bottom: 2.7rem;
    }
}

.movie-frame {
    width: 100%;
    height: calc(56.3vw - 4.73rem);
}

@media (min-width: 768px) {
    .movie-frame {
        margin-left: auto;
        margin-right: auto;
        height: min(calc((76.5vw - 4rem) / 16 * 9), calc((80.1rem - 25.5vw) / 16 * 9));
    }
}

.attractive-example-title {
    display: inline-block;
    font-weight: 600;
    font-size: 3.325rem;
    position: relative;
    background: linear-gradient(transparent 50%, rgb(255, 191, 78) 50%);
    letter-spacing: -0.08em;
    margin-top: 3rem;
    margin-left: calc(50% - 8.5rem);
}

.attractive-example-headcaption {
    margin-top: 1.8rem;
    letter-spacing: calc(-0.09rem);
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 2.7rem;
}

@media(max-width: 767px) {
    .attractive-example-title {
        font-size: 2.2rem;
        margin-left: calc(50% - 5.8rem);
    }
}

.contact {
    max-width: 31rem;
    padding: 1.3rem 2rem 2.1rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .contact {
        max-width: 60rem;
        padding: 4.4rem 2rem 5.7rem;
    }
}

.contact-title {
    width: 8.65rem;
    margin-left: calc(50% - 4.325rem);
    margin-bottom: 0.8rem;
}

@media (min-width: 768px) {
    .contact-title {
        width: 25.4rem;
        margin-left: calc(50% - 13rem);
        margin-bottom: 3.5rem;
    }
}

.contact-text {
    display: block;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    color: rgb(0, 0, 0);
    letter-spacing: -0.06em;
    line-height: 1.36;
    margin-bottom: 0.6rem;
}

@media (min-width: 768px) {
    .contact-text {
        font-size: 1.5rem;
        letter-spacing: -0.05em;
        margin-bottom: 2.3rem;
    }
}

.contact-annotation {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    letter-spacing: -0.06em;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .contact-annotation {
        font-size: 1.7rem;
        letter-spacing: -0.12em;
        margin-bottom: 5rem;
    }
}

.button.contact-button {
    margin-left: calc(50% - min(25.8vw, 6.3rem));
}

@media (min-width: 768px) {
    .button.button.contact-button {
        padding: 1rem 6.9rem 0.7rem 3.8rem;
        margin-left: calc(50% - 14rem);
    }
}

.sns {
    background-color: rgb(255, 165, 0);
    padding: 1rem 2rem 1.4rem;
}

@media (min-width: 768px) {
    .sns {
        padding: 3.3rem 2rem 7.6rem;
    }
}

.sns-title {
    width: 2.34rem;
    margin-left: calc(50% - 1.17rem);
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .sns-title {
        width: 6.5rem;
        margin-left: calc(50% - 3.25rem);
        margin-bottom: 3.9rem;
    }
}

.sns-list {
    background-color: rgb(255, 255, 255);
    max-width: 29rem;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.62rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 1.4rem;
    padding: 1.2rem 1rem 0.8rem;
    align-items: center;
}

@media (min-width: 768px) {
    .sns-list {
        max-width: 76.2rem;
        padding-top: 3.5rem;
        column-gap: 4.3rem;
        padding-bottom: 2.7rem;
    }
}

.sns-list li a>.bi-instagram {
    color: rgb(250, 69, 0);
    font-size: 2.2rem;
}

@media (min-width: 768px) {
    .sns-list li a>.bi-instagram {
        font-size: 6.5rem;
    }
}

.sns-list li a>.bi-line {
    color: rgb(36, 226, 0);
    font-size: 2.15rem;
}

@media (min-width: 768px) {
    .sns-list li a>.bi-line {
        font-size: 6.5rem;
    }
}

.sns-list li a>.bi-twitter {
    color: rgb(1, 178, 254);
    font-size: 2.3rem;
}

@media (min-width: 768px) {
    .sns-list li a>.bi-twitter {
        font-size: 6.7rem;
    }
}

footer {
    display: flex;
    margin-top: 0.9rem;
    margin-bottom: 0.6rem;
    text-align: center;
    justify-content: center;
    flex-direction: column;
}

@media (min-width: 768px) {
    footer {
        margin-bottom: 3.3rem;
        margin-top: 3rem;
    }
}

.footer-logo {
    margin-left: calc(50% - 3.75rem);
    width: 7.5rem;
    margin-bottom: 0.9rem;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-logo {
        width: 23rem;
        margin-left: calc(50% - 11.5rem);
        margin-bottom: 2.1rem;
    }
}

.footer-copyright {
    font-weight: 400;
    font-size: 0.7rem;
    color: rgb(0, 0, 0);
    letter-spacing: calc(-0.04em);
}

@media (min-width: 768px) {
    .footer-copyright {
        font-size: 1.3rem;
    }
}