@charset "utf-8";

/* =========================
header
========================= */
.header {
    z-index: 6;
}

.nav__item:nth-of-type(3) {
    text-decoration: underline;
    text-underline-position: right;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

_::-webkit-full-page-media, _:future, :root .nav__item:nth-of-type(3) {
	text-underline-offset: -17px;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
	::i-block-chrome, .nav__item:nth-of-type(3) {
		text-underline-offset: -17px;
	}
}

/* =========================
main
========================= */
#bg {
    position: relative;
}

.blackfilter {
    width: 100%;
    height: 100vh;
    background: rgba(21, 14, 12, 0.5);
    position: fixed;
    top: 0;
    display: none;
    z-index: 3;
}

.menuMvTitle {
    position: absolute;
    top: 15%;
    transform: translate(-50%, 50%);
    height: 4vw;
    mix-blend-mode: difference;
}

/* slider */
#slider {
    position: fixed;
    width: 100%;
    object-fit: cover;
    height: 100vh;
}

.slider__menuMv {
    transition-duration: 0ms;
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    width: 100%;
    height: 100vh;
    overflow: visible;
    z-index: 2;
}

.vegas-animation-kenburns {
    animation: kenburns ease-out;
}

@keyframes kenburns {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.menuContainer {
    margin: 0 auto;
    padding-top: 100vh;
    text-align: center;
    position: relative;
    z-index: 5;
}

.setMenu__container {
    position: relative;
    margin: 80px auto 12px;
    padding: 16px 9% 24px 8%;
    display: inline-block;
    text-align: center;
}

.setMenu__container:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-left:#fff 1px solid; 
    border-top:#fff 1px solid; 
}

.setMenu__container:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-right:#fff 1px solid; 
    border-bottom:#fff 1px solid; 
}

.setMenu__container h3 {
    margin:0;
    padding:0;
}

.section__topic {
    margin: 0 auto;
    text-align: center;
    font-size: 2rem;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
}

.menu__topic {
    margin-top: 120px;
    font-size: 1.6rem;
    display: inline-block;
    text-align: center;
}

/* setMenu */
.setMenu__topic {
    position: relative;
    margin-top: 80px;
    font-size: 1.6rem;
}
       
.setMenu__topic::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 35%;
    width: 1px;
    height: 40%;
    background: var(--font-white, #fff);
    border-radius: 2px;
    transform: rotate(20deg);
}

.setMenu__topic::after {
    content: '';
    position: absolute;
    top: 30%;
    right: 35%;
    width: 1px;
    height: 40%;
    background: var(--font-white, #fff);
    border-radius: 2px;
    transform: rotate(20deg);
}

.setMenu__topic--wide::before {
    left: 7%;
}

.setMenu__topic--wide::after {
    right: 7%;
}

.setMenu__content {
    margin-top: 14px;
    font-size: 1.6rem;
    max-inline-size: max-content;
    margin-inline: auto;
    text-align: left;
}

.setMenu__content--center {
    text-align: center;
    padding-left: 0;
}

.setMenu__title {
    padding-bottom: 6px;
    position: relative;
    margin: 64px 0 32px;
    font-size: 1.6rem;
    text-align: left;
}

.setMenu__container--af {
    padding: 16px 23.96% 24px;
}

/* border anime */
.border {
    position: relative;
    width: 100%;
}
  
.border:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    border-bottom: solid 1px #fff;
    border-radius: 2px;
    animation: border_anim 1s linear forwards;
}
  
@keyframes border_anim {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
}

.mglr,
.mglr-af {
    margin: 0 1em;
}

.mglr-half {
    margin: 0 0.4em;
}

.mgl-half {
    margin-left: 0.4em;
}

.spBr,
.spBr03 {
    display: none;
}

.mgl-first {
    margin-left: 13.1em;
}

.mgl-middle {
    margin-left: 4.8em;
}

.mgl-last {
    margin-left: 8.8em;
}

.mgl-last02 {
    margin-left: 4em;
}

.mgl-first02 {
    margin-left: 7em;
}

.setMenu__text {
    position: relative;
    font-size: 1.4rem;
    padding-left: 2rem;
}

.setMenu__text::before {
    content: '※';
    position: absolute;
    top: 0;
    width: 12px;
    height: 12px;
    margin-left: -2rem;
}

.setMenu__list {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 7%;
}

.setMenu__item {
    width: 36vw;
}

.setMenu__title--space {
    margin: 64px 0 16px;
}

.setMenu__name {
    text-align: left;
    font-size: 1.4rem;
}

.setMenu__name--afternoon {
    display: flex;
    flex-wrap: wrap;
}

.setMenu__group {
    width: 27%;
    margin-top: 2rem;
}

.setMenu__area {
    width: 88%;
    margin-top: 0.5rem;
}

.setMenu__item:nth-of-type(2) {
    width: 30vw;
}

.setMenu__item--margin {
    margin-bottom: 144px;
}

/***** main sp *****/
@media screen and (max-width: 1200px){
    .menuMvTitle {
        top: 13%;
    }

    .setMenu__container--af {
        padding: 16px 27.05% 24px;
    }
}
@media screen and (max-width: 1080px){
    .section__topic {
        font-size: 1.7rem;
    }

    .menu__topic {
        margin-top: 80px;
        font-size: 1.6rem;
    }

    .setMenu__container {
        margin: 40px auto 8px;
    }

    .setMenu__topic {
        font-size: 1.8rem;
    }

    .setMenu__content {
        font-size: 1.6rem;
    }

    .setMenu__text {
        font-size: 1.3rem;
    }

    .setMenu__item {
        width: 40vw;
    }

    .setMenu__title {
        margin: 48px 0 24px;
        font-size: 1.6rem;
    }

    .setMenu__name {
        font-size: 1.4rem;
    }

    .setMenu__item:nth-of-type(2) {
        width: 29vw;
    }

    .setMenu__title--space {
        margin: 48px 0 8px;
    }

    .setMenu__container--af {
        padding: 16px 30.8% 24px;
    }

} /* 1080px */

@media screen and (max-width: 908px){
    .menuMvTitle {
        top: 11%;
    }

    .menu__topic,.setMenu__content {
        font-size: 1.4rem;
    }

    .setMenu__topic {
        font-size: 1.6rem;
    }

    .mgl-first {
        margin-left: 10.8em;
    }

    .mgl-middle {
        margin-left: 3.4em;
    }

    .mgl-last {
        margin-left: 6.5em;
    }

    .mgl-last02 {
        margin-left: 1.6em;
    }

    .setMenu__text {
        width: 73vw;
        text-align: left;
        font-size: 1.2rem;
        line-height: 2;
        margin: 0 auto;
    }

    .setMenu__list {
        gap: 4%;
    }

    .setMenu__item {
        width: 47vw;
    }

    .setMenu__item:nth-of-type(2) {
        width: 34vw;
    }

    .setMenu__topic--wide::before {
        left: 4%;
    }

    .setMenu__topic--wide::after {
        right: 4%;
    }

    .mglr,.mglr-af {
        margin: 0 0.5em;
    }

    .mgl-first02 {
        margin-left: 6em;
    }

} /* 908px */

@media screen and (max-width: 769px){
    .section__topic {
        font-size: 1.6rem;
    }

    .menu__topic {
        margin-top: 48px;
        padding: 0;
        font-size: 1.3rem;
    }

    .setMenu__topic {
        font-size: 1.4rem;
    }

    .setMenu__content {
        font-size: 1.3rem;
    }

    .setMenu__list {
        display: inline-block;
    }

    .setMenu__title {
        margin: 36px 0 24px;
    }

    .setMenu__item, .setMenu__item:nth-of-type(2) {
        width: 75vw;
    }

    .setMenu__item--af {
        display: none;
    }

    .setMenu__title {
        font-size: 1.3rem;
    }

    .setMenu__name {
        font-size: 1.2rem;
    }

    .setMenu__title--space {
        margin: 36px 0 0;
    }
    
    .mgl-first {
        margin-left: 10.9em;
    }

    .mgl-middle {
        margin-left: 3.4em;
    }

    .mgl-last {
        margin-left: 6.5em;
    }

} /* 769px */

@media screen and (max-width: 700px){
    .menuMvTitle {
        top: 8%;
    }

    .section__topic {
        font-size: 1.4rem;
    }

    .setMenu__topic::before,.setMenu__topic::after,
    .setMenu__topic--wide::before,.setMenu__topic--wide::after {
        display: none;
    }

    .spBr {
        display: block;
    }

    .setMenu__content {
        text-align: center;
    }

    .mgl-first, .mgl-middle, .mgl-last, .mgl-last02{
        display: flex;
        margin: 0 auto;
        justify-content: center;
    }

    .setMenu__text {
        width: 72vw;
    }

    .setMenu__container--af {
        padding: 16px 26.83% 24px;
    }

    .setMenu__item, .setMenu__item:nth-of-type(2) {
        width: 67vw;
    }

} /* 700px */

@media screen and (max-width: 570px){

    .menuMvTitle {
        height: 6.5vw;
    }

    .menu__topic {
        margin: 48px 13% 0;
        text-align: left;
    }

    .pcBr {
        display: none;
    }

    .setMenu__container {
        margin: 32px auto 8px;
        padding: 16px 11.6% 24px;
    }

    .setMenu__topic {
        font-size: 1.25rem;
    }

    .setMenu__content {
        font-size: 1.2rem;
        text-align: left;
        line-height: 2;
    }

    .mgl-first, .mgl-middle, .mgl-last, .mgl-last02 {
        margin-left: 17em;
    }

    .mgl {
        display: flex;
    }

    .setMenu__box:nth-of-type(2) {
        margin: 0 9% 0;
    }

    .setMenu__content--center {
        text-align: center;
    }

    .setMenu__text {
        width: 76vw;
    }

    .setMenu__item, .setMenu__item:nth-of-type(2) {
        width: 69vw;
    }

    .mgl-first02 {
        display: inline-block;
        margin-left: 14em;
    }

    .setMenu__topic--wide::before {
        left: 6%;
    }

    .setMenu__topic--wide::after {
        right: 7%;
    }

} /* 570px */

@media screen and (max-width: 450px){

    .menu__topic {
        margin: 48px 8% 0;
    }

    .setMenu__container {
        padding: 16px 6% 24px;
    }

    .setMenu__text {
        width: 80vw;
    }

    .setMenu__group {
        width: 100%;
    }

    .setMenu__area {
        width: 100%;
    }

    .setMenu__container--af {
        padding: 16px 17% 24px;
    }

    .setMenu__topic--wide::before {
        left: 1%;
    }

    .setMenu__topic--wide::after {
        right: 2%;
    }

    .mgl-first02 {
        margin-left: 5em;
    }

    .spBr03 {
        display: block;
    }

} /* 450px */

@media screen and (max-width: 375px){

    .menu__topic {
        margin: 48px 7% 0;
        text-align: left;
        font-size: 1.2rem;
    }

    .setMenu__box,.setMenu__box:nth-of-type(2) {
        margin: 0 2% 0;
    }

    .setMenu__container {
        padding: 16px 2% 24px;
    }

    .setMenu__topic span {
        display: flex;
        justify-content: center;
    }

    .mgl-first, .mgl-middle, .mgl-last, .mgl-last02 {
        margin-left: 15.5em;
    }

    .mglr, .mglr-af {
        margin: 0 0.5em;
        display: contents;
    }

    .setMenu__container--af {
        padding: 16px 16% 24px;
    }

    .setMenu__text {
        width: 84vw;
    }

    .setMenu__item, .setMenu__item:nth-of-type(2) {
        width: 77vw;
    }

} /* 375px */

/* =========================
footer
========================= */
.footer {
    background: none;
}