@charset "utf-8";
/* CSS Document */

/*--reset start--*/
html{font-feature-settings:"palt"; scroll-behavior:smooth; background:var(--C4);background-attachment: fixed}
body,div,h1,h2,h3,h4,h5,h6,p,ol,ul,li,dl,dt,dd,button,small,strong,table,input{margin:0; font-size:1em}
body{font-family:-apple-system, BlinkMacSystemFont,'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN',"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; -webkit-font-smoothing:antialiased; line-height:1.75; color:var(--C12)}/*color, line-height*2509*/
ul,ol{padding:0; list-style:none}
i,em{font-style:normal}
img{max-width:100%}
a{color:inherit; text-decoration:none}
button{background:none; border:0; outline:0; appearance:none}
/*--reset end--*/
button{background:none; border:0; outline:0; appearance:none}
/*--共通パーツ start--*/
:root{
    --C1:linear-gradient(#000,#333 45%,#333 55%,#000);/*2509*/
	--C10:rgba(0,0,0,0.2);/*251012*/
	--C11:#333;/*2509*/
	--C12:#000;/*2509*/
	--C13:linear-gradient(#320000,#b40000 45%,#b40000 55%,#320000);/*2509*/
	--C14:#000;/*2509*/
	--C15:#444;/*2509*/
	--C16:#eee;/*2509*/
	--C17:#f2f2f2;
	--C18:#5a5a5a;
    --C2:#ffd200;/*黄*/
    --C3:linear-gradient(#001e00,#007800 45%,#007800 55%,#001e00);/*2509*/
    --C4:#fff;/*黒→白*/
    --C5:linear-gradient(#84725c,#bfb69f 25%,#f8f8e0 45%,#f8f8e0 55%,#bfb69f 75%,#84725c);/*2509*/
    --C6:#bbb;/*白→灰*/
    --C7:#0000b3;/*リンクの色：水色*/
    --C8:#fffddd;/*薄い黄色*/
    --C9:#a00;/*赤*/
    
}
/*旧・白モード*/
/*--C1:#00643c;
--C4:#000;
--C5:#fff;
--C6:#fff;*/
/*旧・白モード*/
.close{opacity:.35}/*251011*/
.txRight{text-align:right}/*251020*/

@media(max-width:789px){
      .PcOnly{display:none !important}
      html{font-size:calc(100vw / 750)}
      body{font-size:28rem}/*基礎font-size*/
      .Btxt{font-size:34rem}/*タイトルなど大きい文字*/
}

@media(min-width:790px){
    .SpOnly{display:none !important}
    html{font-size:calc(100vw / 1060)}
    body{font-size:16rem}/*基礎font-size*/
    .Btxt{font-size:18rem}/*タイトルなど大きい文字*/
    a,label,button,summary,select{transition:opacity .3s; cursor:pointer}
    a:hover,label:hover,button:hover,summary:hover{opacity:.6}
    
    html::-webkit-scrollbar{width:5px}/*remはSafariでバグが出るのでpx指定*/
    html::-webkit-scrollbar-track{background-color:transparent}
    html::-webkit-scrollbar-thumb{background-color:var(--C1)}
}

@media(min-width:1060px){
	html{font-size:1px}
}

/*--Header--*/
#Header,
#HeaderNoLink{position:relative; /*--background:var(--C5)--*/}
#HeaderH1{position:absolute; z-index:2}
#HeaderLogo,
#HeaderMenuImg{display:block}
#HeaderBg,
#HeaderMenuBtn{display:block; position:absolute}
#HeaderMenuBg{position:fixed; top:0; left:100vw; background:rgba(0,0,0,.8); height:100vh; z-index:5; transition:.3s;z-index: 9998;}/*251011*/
#HeaderMenuBg.Active{left:0}
#HeaderMenuUl{position:fixed; color:var(--C6); overflow:auto; z-index:6; text-align:right; transition:.3s;z-index: 9999;}
#HeaderMenuUl:not(.Active),
#HeaderMenuBg:not(.Active){opacity:0}
.HeaderMenuLi{display:block; border-bottom:1px solid var(--C6)}
.HeaderMenuLi:last-child{margin-bottom:0; border-bottom:0}/*251011*/
#CloseBtn{position:absolute}

@media(max-width:789px){
    #Header,
    #HeaderNoLink{min-height:120rem}
    #HeaderH1{width:400rem; left:30rem; top:30rem}/*251011*/
    #HeaderNoLink #HeaderH1{left:80rem}
    #HeaderBg{width:324rem; left:385rem; top:0}
    #HeaderNoLink #HeaderBg{left:475rem}
    #HeaderMenuBtn{width:70rem; height:70rem; right:30rem; top:20rem}
    #HeaderMenuUl{top:200rem; width:670rem; left:calc(100vw + 40rem); max-height:calc(100vh - 400rem)}
    #HeaderMenuUl.Active{left:40rem}
    .HeaderMenuLi{padding:30rem 40rem}
    #HeaderMenuBg{width:100vw}
    #CloseBtn{top:34rem; right:44rem; width:40rem; height:40rem}
}

@media(min-width:790px){
    #Header,
    #HeaderNoLink{min-height:90rem; width:1180rem; margin:0 auto}
    #HeaderH1{width:280rem; left:24rem; top:20rem}/*251011*/
    #HeaderNoLink #HeaderH1{left:264rem}
    #HeaderBg{width:258rem; left:312rem; top:0}
    #HeaderNoLink #HeaderBg{left:604rem}
    #HeaderMenuBtn{width:57rem; height:57rem; right:40rem; top:20rem; cursor:pointer}
    #HeaderMenuUl{top:90rem; width:500rem; left:calc(200vw - 530rem); max-height:calc(100vh - 180rem); padding-top:20rem}
    #HeaderMenuUl.Active{left:calc(100vw - 530rem)}
    .HeaderMenuLi{margin-bottom:20rem; padding:0 30rem 20rem}
    #HeaderMenuBg{width:100vw; cursor:pointer}
    #CloseBtn{top:34rem; right:74rem; width:30rem; height:30rem}
    #HeaderMenuUl::-webkit-scrollbar{width:5rem}
    #HeaderMenuUl::-webkit-scrollbar-track{background-color:transparent}
    #HeaderMenuUl::-webkit-scrollbar-thumb{background-color:var(--C5)}
    
    #HeaderMenuBtn:hover{opacity:.9}
}

/*旧ダークモード*/
/*@media(max-width:789px){
    #Header{margin-bottom:40rem}
    .Wrapper:has(.LP){margin-top:-40rem}
}
@media(min-width:790px){
    #Header{margin-bottom:30rem}
}*/
/*旧ダークモード*/

/*--メール無効の人に表示（TOPページ）--*/
#MailNone{border:2px solid red; padding:2em; margin:0 auto 2em; box-sizing:border-box}
@media(max-width:789px){
    #MailNone{width:670rem}
}
@media(min-width:790px){
    #MailNone{width:1000rem}
}

/*--Footer--*/
#Footer,
#FooterNoLink{text-align:center; background:var(--C12); color:var(--C4)}
#FooterP{color:var(--C4)}/*251011*/
#FooterLogoA,
#FooterLogo,
#Copy,
#FooterNoLink{display:block}
#FooterMenu{line-height:1}
.FooterMenuA{display:inline-block}
#Copy{font-size:12rem}
#CREDIXSURELINKS{padding-bottom:20rem}

@media(max-width:789px){
    #Footer,
    #FooterNoLink{padding:20rem 0}
    #FooterLogoA{width:400rem; margin:20rem auto 0}/*251011*/
    #FooterMenu{padding:40rem 100rem 20rem}
    .FooterMenuA:nth-child(1),
    .FooterMenuA:nth-child(4){padding-right:25rem; border-right:1px solid var(--C4); margin-right:25rem}/*251011*/
    .FooterMenuA{margin-bottom:20rem}
    #FooterP{padding:0 40rem}
	#Copy{font-size:0.8em}
}

@media(min-width:790px){
    #Footer,
    #FooterNoLink{padding:20rem 0; font-size:16rem; clear:both}
    #FooterLogoA{width:300rem; margin:20rem auto 0}/*251011*/
    #FooterMenu{padding:40rem 0}
    .FooterMenuA:not(:first-child){margin-left:14rem; padding-left:14rem; border-left:1px solid var(--C4)}
}

/*--Wrapper--*/
.Ttl1{margin-top: 30rem; background:var(--C11); color:var(--C4); text-align:center; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:.5em 1em; min-height:50rem}
.Ttl2{color:var(--C12); text-align:center}
.Ttl3{color:var(--C12); text-align:center}/*2509*/
.Link{color:var(--C7)}
.MemberBox{box-sizing:border-box; border-bottom:2px solid var(--C11); border-left:2px solid var(--C11); border-right:2px solid var(--C11)}
.BtnArea{display:flex; justify-content:space-between}
.Btn1,
.Btn2,
.Btn3,
.Btn4{background:var(--C1); color:var(--C6); font-weight:bold; text-align:center; display:flex; justify-content:center; align-items:center; margin:0 auto; line-height:1.3; box-sizing:border-box; border-radius:10rem}
.Btn3{background:var(--C3)}
.Btn4{background:var(--C13); color:var(--C6)}/*2509*/
.W1{box-sizing:border-box}
.W2{box-sizing:border-box}
div.Btn3{opacity:.35}
.TC{text-align:center}
.TJ{text-align:justify}
.Red{color:var(--C9)}
.FreeTxt{border-bottom:1px solid var(--C1); text-align:justify}
.FreeTxtRight{border-bottom:1px solid var(--C1); text-align:right}/*2510*/
.FreeTxt img{display:block}
.ListDetailPagerA{position:absolute}
.Table .Th,
.Table .Td{text-align:center; color:var(--C6)}
.Table2{table-layout:fixed}
.Table2 .Th{width:35%}


.Table3 {width: 100%;margin: 20rem auto 0;border-collapse: collapse;table-layout: fixed;border: 1px solid var(--C12);}
.Table3 .Th {width:35%;background: var(--C18);color: var(--C4);padding: 20rem;border-left:1px solid var(--C12);
    border-right:1px solid var(--C12);border-top:1px solid var(--C4);border-bottom:1px solid var(--C4);}
.Table3 tr:first-child .Th{border-top:1px solid var(--C12);}
.Table3 tr:last-child .Th{border-bottom:1px solid var(--C12);}
.Table3 .Td {background: var(--C4);color: var(--C12);padding: 20rem;border: 1px solid var(--C12);text-align: left;}

.FormLabel:not(:first-child){margin-left:1em}
.labelInput{margin-right:.5em}
.ListABox,
.Ul{list-style:disc}
.ListA{display:list-item; color:var(--C7)}
.Ol{list-style:decimal}
.ListABox,
.Ol,
.Ul{padding-left:1em; box-sizing:border-box}
.Ul{list-style-position:inside}
.Li{text-indent:-1.3em; padding-left:1.3em}
.LpImg,
.LpA,
.DelayImg{display:block}
pre img,
.DelayImg{pointer-events:none}
pre a{pointer-events:auto; color:var(--C7); text-decoration:underline}
.TableInput,
.TableSelect,
.TableTexterea{width:100%; border:1px solid var(--C11); display:block; margin:0 auto; box-sizing:border-box; padding:.5em; border-radius:10rem; background:var(--C4)}
.Details{border:1px solid var(--C12); border-radius:10rem; padding:1em}
.Summary{color:var(--C12); display:block}
.Summary::-webkit-details-marker {display:none}/* Safari対策 */
.Details[open] .Summary{padding-bottom:1em; border-bottom:1px solid var(--C4); margin-bottom:1em}
.LbL{line-break:loose; font-feature-settings:normal}


.TosTitle{
    position: relative;
    margin: 0 auto;
    background-image: url("../images/common/banner.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: left;

    white-space: nowrap;
    box-sizing: border-box;
}

.TosTitle span{
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}

.TosTitle .titleSpan1{
    color: #000;
    font-size: 24rem;
}

.TosTitle .titleSpan2{
	padding: 0rem 15rem;
    color: #e60012;
    font-size: 20rem;
}


@media(max-width:789px){
    .Wrapper{overflow:hidden}
    .SlideCover + .Wrapper{padding-top:40rem}
    .BtnArea{padding:0 40rem}
    .Btn1,
    .Btn2,
    .Btn3,
    .Btn4{min-height:70rem; padding:20rem}
    .Btn1,
    .Btn3,
    .Btn4{font-size:28rem; width:400rem}
    .Btn2{flex:1 1 210rem}
    .Btn2:not(:first-child){margin-left:20rem}
    .TosTitle{width: 670rem; height: 88rem;padding: 24rem 80rem;}
    .W1{width:670rem; margin:0 auto}
    .W2{width:670rem; margin:0 auto}
    .W3{width:650rem; margin:0 auto}
    .Mt1{margin-top:100rem}
    .Mt2{margin-top:40rem}
    .Mt3{margin-top:20rem}
    .Mt4{margin-top:10rem}
    .Mb1{margin-bottom:100rem}
    .Mb2{margin-bottom:40rem}
    .Mb3{margin-bottom:20rem}
    .Mb4{margin-bottom:10rem}
    .Pt1{padding-top:100rem}
    .Pt2{padding-top:40rem}
    .Pt3{padding-top:20rem}
    .Pt4{padding-top:10rem}
    .Pb1{padding-bottom:100rem}
    .Pb2{padding-bottom:40rem}
    .Pb3{padding-bottom:20rem}
    .Pb4{padding-bottom:10rem}
    .TableSelect,
    .TableTexterea{max-width:400rem; min-height:70rem}
    .TableTexterea{min-height:250rem}
    .FreeTxt img{height:auto !important}
}

.OneColumn{display:flex;flex-direction:column;align-items:center;}
.LP{display:flex;flex-direction:column;align-items:center;}

@media(min-width:790px){
    .SlideCover + .Wrapper{padding-top:60rem}
    .Wrapper{width:1180rem; margin:0 auto;display: flex;flex-wrap: wrap;}
    .BtnArea{padding:0 60rem}
    .Btn1,
    .Btn2,
    .Btn3,
    .Btn4{min-height:60rem; padding:15rem}
    .Btn3:disabled:hover{opacity:1; cursor:auto}
    .Btn1,
    .Btn3,
    .Btn4{font-size:18rem; width:300rem}
    .Btn2{flex:1 1 170rem}
    .Btn2:not(:first-child){margin-left:15rem}
    .TosTitle{width: 820rem; height: 72rem;margin-left:20rem;padding: 24rem 100rem;}
    .W1{width:820rem; margin:0 30rem}
    .W2{width:720rem; margin:0 80rem}
    .W3{width:820rem; margin:0 30rem}
    .Mt1{margin-top:80rem}
    .Mt2{margin-top:30rem}
    .Mt3{margin-top:15rem}
    .Mt4{margin-top:10rem}
    .Pt1{padding-top:80rem}
    .Pt2{padding-top:30rem}
    .Pt3{padding-top:15rem}
    .Pt4{padding-top:10rem}
    .Mb1{margin-bottom:80rem}
    .Mb2{margin-bottom:30rem}
    .Mb3{margin-bottom:15rem}
    .Mb4{margin-bottom:10rem}
    .Pb1{padding-bottom:80rem}
    .Pb2{padding-bottom:30rem}
    .Pb3{padding-bottom:15rem}
    .Pb4{padding-bottom:10rem}
    .TableSelect,
    .TableTexterea{max-width:325rem; min-height:50rem}
    .TableTexterea{min-height:200rem}
    .OneColumn{width:880rem; margin:0 auto}
}


/*--MainColumn--*/
@media(max-width:789px){
	#MainColumn{width:100%; margin-top: 10px}
	.OneColumn{width:100%; margin-top: 40px}
}

/*--LeftColumn, RightColumn--*/
#LeftColumn{box-sizing:border-box}
#RightColumn{box-sizing:border-box}
.MemberBoxLi{font-weight: bold; display:flex; border-bottom:2px solid var(--C6)}
.MemberBoxLiDiv{display:flex; align-items:end}
.MemberBoxLiDiv:first-child{align-items:center}
.MemberBoxLiDiv3{margin-left:.3em}
.MemberBoxLi:last-child{border-bottom:0}/*251011*/
.MemberBtnArea{display:flex; text-align:center; justify-content:space-between}
.MemberBtnA{background:var(--C6); color:var(--C1); font-weight:bold; line-height:1.3; display:flex; justify-content:center; align-items:center; border-radius:10rem}
.MailerBtn{background:var(--C15); color:var(--C4); font-weight:bold; line-height:1.3; display:flex; justify-content:center; align-items:center; border-radius:10rem}
.BnrAreaA,.BnrAreaImg{position: relative;margin: auto;display:block}
.BnrAreaA p {
  position: absolute;/*絶対配置*/
  color: rgb(0, 0, 0);
  bottom: -30%;
  left:20%;
  }
.Redline{background:var(--C13); color:var(--C4);}

@media(max-width:789px){
    #LeftColumn{width:670rem; margin:0 auto}
	#RightColumn{width:670rem; margin:20rem auto}
    .MemberBox{padding:20rem}
    .MemberBoxLiDiv{flex:1 1 375rem; padding:25rem; box-sizing:border-box}
    .MemberBoxLiDiv:first-child{border-right:1px solid var(--C3); flex:0 0 250rem}
    .MemberBoxLi:last-child .MemberBoxLiDiv{align-items:center}
    .MemberBtnArea{padding-top:20rem}
    .MemberBtnA{margin-top: 20rem; min-height: 80rem}
    .MemberBox + .BnrArea{margin-top:10rem;}
    .BnrAreaA{width:670rem; margin:20rem auto 0}/*251011*/
	.BnrAreaA p {
	  left:30%;
	  }
    .MailerBtn{margin-top:20rem; min-height:80rem}
	.spnone{display:none}
	.pcnone{display:block}
}

@media(min-width:790px){
    .MemberBox{padding:10rem}
    .MemberBoxLi{min-height:67rem; padding:10rem; flex-direction:column; align-items:center; justify-content:center; text-align:center}
    .MemberBtnArea{padding-top:15rem; flex-wrap:wrap}
    .MemberBtnA{flex:0 0 130rem; margin-bottom:10rem; height:40rem}
    .MailerBtn{min-height:40rem}
    .MemberBox + .BnrArea{margin-top:30rem}
    .BnrAreaA{margin-bottom:12rem}
	.spnone{display:block}
	.pcnone{display:none}
}

@media (min-width:790px){
    .Wrapper{
        width:1180rem;
        margin:0 auto;
        display:grid;
        grid-template-columns: 260rem 40rem 880rem;
    }
    .LeftWrap{
        grid-column:1;
        display:flex;
        flex-direction:column;
        margin-bottom:30rem;
    }
    #LeftColumn{
        margin-bottom:0px;
    }
    #MainColumn{
        grid-column:3;
        margin-bottom:30px;
    }
}

@media (max-width:789px){
    .Wrapper{
        display:flex;
        flex-direction:column;
    }
    .LeftWrap{ order:1; }
    #MainColumn{ order:2; }
    #RightColumn{ order:3; }
    .LeftWrap{
        display:contents;
    }
}

#footerColumnBanner{margin: 0 auto;text-align: center;}

.columnBannerA,.columnBannerB{
    display: block;
    position: relative;
    text-decoration: none;
    color: #000;
    font-weight: bold;
    padding: 14rem 0;
    margin: 0 auto 24rem;
    transition: color .2s ease;
}

.columnBannerA::after{
    content: "";
    display: block;
    width: 80%;
    height: 1rem;
    background: #000;
    margin: 10rem auto 0;
}

.columnBannerA,.columnBannerB:hover{
    color: #1a0dab;
}

.columnBannerA,.columnBannerB:visited{
    color: #551a8b;
}

@media (min-width:790px){
    #footerColumnBanner{
        width: 880rem;
    }

    .columnBannerA,.columnBannerB{
        font-size: 36rem;
        letter-spacing: 2rem;
    }
}

@media (max-width:789px){
    #footerColumnBanner{
        width: 670rem;      
        margin: 0 auto;     
    }
    .columnBannerA,.columnBannerB{
        font-size: 30rem;   
        letter-spacing: 0;
        padding: 12rem 0;
    }
    .columnBannerA::after{
        width: 80%;
        margin: 8rem auto 0;
    }
}

.RedCMBtn{
    background: linear-gradient(180deg,#c40000 0%,#8f0000 100%);
    color: #fff;
    font-weight: 700;
    border-radius: 6rem;
    border: none;
    box-shadow: 0 6rem 16rem rgba(213,0,0,.35);
    transition: all .2s ease;
}

.BlackCMBtn{
    background: linear-gradient(180deg,#4a4a4a 0%,#2a2a2a 100%);
    color: #fff;
    font-weight: 700;
    border-radius: 6rem;
    border: none;
    box-shadow: 0 6rem 16rem rgba(0,0,0,.25);
    transition: all .2s ease;
}

.BlueCMBtn{
    background: linear-gradient(
        180deg,
        #0f6a6f 0%,
        #0b4f53 100%
    );
    color: #ffffff;
    font-weight: 700;
    border-radius: 6rem;
    border: none;
    box-shadow: 0 6rem 16rem rgba(0,0,0,.25);
    transition: all .2s ease;
}

.GreyCMBtn{
    background: linear-gradient(
        180deg,
        #a6a6a6 0%,
        #7f7f7f 100%
    );
    color: #f2f2f2;
    font-weight: 700;
    border-radius: 6rem;
    border: none;
    box-shadow: 0 4rem 10rem rgba(0,0,0,.15);
    transition: none;
    cursor: not-allowed;
    pointer-events: none;
}

@media (hover:hover){
    .RedCMBtn:hover {
        background: linear-gradient(180deg, #f00000 0%, #d90000 100%);
        transform: translateY(-2rem);
    }

	.BlackCMBtn:hover {
        background: linear-gradient(180deg, #444444 0%, #222222 100%);
        transform: translateY(-2rem);
    }
    
	.BlueCMBtn:hover{
	    background: linear-gradient(180deg, #117176 0%, #0c5a5e 100%);
	    transform: translateY(-2rem);
	}
}

@media(max-width:789px){
    .RedCMBtn{width:400rem; height:70rem; font-size: 26rem;}
    .BlackCMBtn{width:400rem; height:70rem; font-size: 26rem;}
    .BlueCMBtn{width:400rem; height:70rem; font-size: 26rem;}
    .GreyCMBtn{width:400rem; height:70rem; font-size: 26rem;}
}

@media(min-width:790px){
    .RedCMBtn{width:325rem; height:50rem; font-size: 18rem;}
    .BlackCMBtn{width:325rem; height:50rem; font-size: 18rem;}
    .BlueCMBtn{width:325rem; height:50rem; font-size: 18rem;}
    .GreyCMBtn{width:325rem; height:50rem; font-size: 18rem;}
}



.global-nav {
    position: relative;
    border-bottom: 3px solid #e5e5e5; 
}

.menu-wrap {
    position: relative;
    overflow: visible; 
}

.menu {
    display: flex;
    align-items: center;
    gap: 16px; 
    list-style: none;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.menu::-webkit-scrollbar {
    display: none;
}

.menu-item {
    position: relative;
    display: inline-block;
    padding: 5px 10px 2px; 
    font-size: 24px; 
    font-weight: 600;
    color: #8a8a8a;
    text-decoration: none;
    letter-spacing: .03em;
    flex-shrink: 0;
    transition: color .2s ease, transform .2s ease;
}

.menu-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px; 
    width: 100%;
    height: 5px;
    background: #d40000;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    z-index: 5; 
}

.menu-item:hover {
    color: #000 !important;
    font-weight: 700 !important;
}

.menu-item:hover::after {
    transform: scaleX(1) !important;
    background: #d40000 !important
}

.menu-item.current {
    color: #000 !important;
    font-weight: 700 !important;
}

.menu-item.current::after {
    transform: scaleX(1) !important;
    background: #d40000 !important
}

@media(min-width: 790px) {
    .global-nav {
        max-width: 1180rem; 
        margin: 10px auto 20px;
    }
    .menu {
        overflow-x: visible;
    }
}

@media(max-width: 789px) {
    .menu {
        gap: 15px; 
    }
    .menu-item {
        font-size: 16px;
        padding: 10px 0px 5px;
    }
}