@charset "utf-8";

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    backface-visibility: hidden;
}

.none { display: none !important;}

:root {
    --base-font-color: #151515;
    --base-bg-color: #F2F2F2;
    --sub-bg-color: #EEEEE8;
    --main-color: #761616;
    /*--sub-color: ;
    --accent-color: ;*/
}

html{ margin: 0; padding: 0; scroll-padding-top: 150px; }

body {
    font-family: "Noto Sans Japanese","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
    color: var(--base-font-color);
    font-size: 16px;
    line-height: 1.8;
    word-break: break-all;
    margin: 0;
    padding: 0;
    background: var(--base-bg-color);
}

div, p, ul, ul li, dl, dt, dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
	list-style:none;
	box-sizing:border-box;
}
img, video, object {
    max-width: 100%;
    height: auto;
    border: none;
}
img{ image-rendering: -webkit-optimize-contrast; }

a:link { color:var(--base-font-color); text-decoration: none; transition:0.3s; }
a:visited { color:var(--base-font-color); transition:0.3s; }
a:hover { color:var(--main-color); transition:0.3s; }
a:hover img{ opacity: 0.8; transition:0.3s; }
a[href^="tel:"] { text-decoration:none; pointer-events:none ; text-emphasis: none !important;}
a[href^="fax:"] { text-decoration:none; pointer-events:none ;}


.pc{display: inherit;}
.tb{display: none;}
.sm{display: none;}

@media only screen and (max-width:1024px){
    html{scroll-padding-top: 100px;}
}
@media only screen and (max-width:820px){
    .pc {display:none;}
    .tb {display:block;}
    .sm {display:none;}
}
@media only screen and (max-width:468px){
    body {font-size: 15px; min-width: 375px;}
    .pc {display:none;}
    .tb {display:none;}
    .sm {display:block;}
}


/* =========================================================================================
Header
=========================================================================================*/
#header {
    width:100%;
    height: 100px;
    font-family: "Noto Serif JP", serif;
    background:#FFF;
    position: fixed;
    padding:0;
    margin: 0;
    z-index: 100;
    top: 0;
}
#header .inner{
    position: relative;
    display: flex;
    align-items: center;
    justify-content:right;
    max-width: 100%;
    padding: 0;
    height: 100%;
}
#header .logo{
    width: 35%;
    padding-inline: 1.5vw 2.0vw;
    margin: 0 !important;
}
#header .logo img{
    display:block;
    width: 100%;
    max-width: 390px;
    z-index: 100;
}
/*globalnavi*/
#header #g-navi-area{
    width: 100%;
    background:var(--base-font-color);
}
#header #g-navi-area ul {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: right;
    padding-left: 2.5vw;
    gap: 2.5vw;
}
    #header #g-navi-area ul li{
        font-size: clamp(0.625rem, 0.475rem + 0.625vw, 1.125rem);
        font-weight: bold;
        display: flex;
        align-items: center;
    }
    #header #g-navi-area ul li a{
        color: #FFF;
        display: block;
        padding: 10px 0;
    }
    #header #g-navi-area ul li a:hover{
        opacity: 0.8;
        text-decoration: none;
        transition: 0.5s;
    }
    #header #g-navi-area ul li.contact a{
        color: var(--main-color);
        background: #FFF;
        height: 100px;
        display: flex;
        align-items: center;
        padding: 20px 2.5vw;
    }
    #header #g-navi-area ul li.contact a:hover{
        color: #FFF;
        background: var(--main-color);
        opacity: 1;
        text-decoration: none;
        transition: 0.3s;
    }

#header .openbtn,
#header #g-navi-area ul li.home,
#header #g-navi-area ul.sub-menu{
    display: none !important;/*PCでは非表示*/
}
@media only screen and (max-width:1280px){
    #header {
        height: 60px;
        padding:0;
        background: #FFF;
    }
    #header .inner{
        justify-content: space-between;
        padding-right: 85px;
    }
    #header .logo{
        padding-left: 10px;
    }
    #header .logo a img{
        width: auto;
        height: 40px;
    }
    /* HAMBURGER MENU */
    #header .openbtn{
        display: inherit !important;
        position:fixed;
        z-index: 9999;
        text-indent: -9999px;
        top: 0;
        right: 0;
        cursor: pointer;
        width: 68px;
        height:61px;
        background: url(../images/common/menu_btn.svg) no-repeat center;
        background-size: 35px 35px !important;
        transition: 0.3s;
    }
    #header .openbtn.active {
        background: url(../images/common/menu_close.svg) no-repeat center;
        transition: 0.3s;
    }
    #header #g-navi-area{
        position:fixed;
        z-index: 99;
        top:60px;/*headerの高さ分下げる*/
        right: -120%;
        width: 400px !important;
        height: 100vh;
        background: linear-gradient(rgba(18, 18, 18, 1.0), rgba(18, 18, 18, .2));
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        transition: all 0.75s;
        display: initial;
        float: none;
        border-radius: 0;
        filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
    }
    #header #g-navi-area.panelactive{/*アクティブクラスがついたら位置を0に*/
        right: 0;
    }
    #header #g-navi-area a{
        color: #FFF !important;
    }
    #header #g-navi-area a:hover{
        text-decoration: none !important;
        opacity: 0.8 !important;
        transition: 0.3s !important;
    }
    #header #g-navi-area.panelactive #g-navi-list{/*ナビの数が増えた場合縦スクロール*/
        z-index: 999; 
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 5vw;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #header #g-navi-area ul {
        max-width: 400px;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        position: relative;
        z-index: 999;
        padding: 0;
        gap: 1.5em;
        top: 10px;
    }
    #header #g-navi-area ul li{
        display: block;
        text-align: left;
        font-size: 1.25em;
    }
    #header #g-navi-area ul li a{
        color: #FFF;
        display: block !important;
        padding: 0 !important;
        filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.8));
    }
    #header #g-navi-area ul li.home{
        display: inherit !important;
    }
    #header #g-navi-area ul li.contact{
        min-width: 100%;
        margin-top: 10px;
    }
    #header #g-navi-area ul li.contact a{
        background: transparent;
        border: 1px solid;
        width: 100%;
        height: auto;
        align-items: inherit;
        padding: 10px 15px !important;
        position: relative;
    }
    #header #g-navi-area ul li.contact a::after{
        position: absolute;
        content: "";
        background: url(../images/common/arrow_right_wh.svg) no-repeat center;
        background-size: contain;
        width: 1.125em;
        height: 100%;
        right: 1.26em;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    }
    #header #g-navi-area ul li.contact a:hover{
        text-decoration: none;
        background: var(--main-color);
        opacity: 1 !important;
        transition: 0.3s;
        filter: none;
    }
    #header #g-navi-area ul.sub-menu{
        display: inherit !important;
        padding: 2vh 0 160px;
        margin-top: 50px;
        border-top: 1px solid #FFF;
    }
    #header #g-navi-area ul.sub-menu li{
        font-size: 1.0rem;
        font-weight: 400;
    }
}
@media only screen and (max-width:820px){
    #header #g-navi-area{ right: -150%; width: 100% !important;}
    #header #g-navi-area #g-navi-list { padding: 30px 50px 50px!important; }
}

/* =========================================================================================
Footer
=========================================================================================*/
#footer {
    color: #FFF;
    background: #121212;
    padding-inline: 30px;
    overflow: hidden;
}
#footer .inner {
    display: flex;
    align-items: start;
    gap: 7%;
    padding-block: 80px;
}
#footer .address{
    display: flex;
    flex-wrap: wrap;
    padding: 0;
}
#footer .address .logo img{
    width: 290px;
    margin: 0 100px 10px 0;
}
#footer .address span{
    display: inline-block;
}
#footer .address span:first-child{
    margin-right: 1.0em;
}
#footer .address a {
    position: relative;
    display: inline-block;
}
#footer .copyright {
    color: #FFF;
    font-size: 0.8rem;
    text-align: center;
    background: #3B3B3B;
    padding: 20px 30px;
    /*親要素を突き抜け*/
    width: 100vw;
    margin: 0 calc(50% - 50vw);
}

/* footer-navi */
#footer .f-navi{
    display: flex;
    justify-content:left;
    flex-wrap: wrap;
    gap: 10px 40px;
}
#footer .f-navi ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#footer .f-navi li{
    display:inline-table;
    list-style-type: none;
    position: relative;
    padding-left: 1.0em;
}
#footer .f-navi li::before{
    content: "";
    width: 0.4em;
    height: 1px;
    background: #FFF;
    position: absolute;
    top: 0.95em;
    left: 0;
}
#footer .f-navi li ul{
    display: inline-block;
    margin-left: 0.5em;
}
#footer .f-navi li ul li{
    display: list-item;
    list-style-type:disc; 
}
#footer a{
    color: #FFF;
}
#footer a:hover{
    opacity: 0.8;
    transition: 0.3s;
}

@media only screen and (max-width:820px){
    #footer .inner { gap:30px; justify-content: space-between;}
    #footer .inner .address { flex-direction: column; }
    #footer .address .logo img{ margin-right: 0; }
    #footer .f-navi{ flex-direction: column; justify-content: right; }
    #footer .copyright { text-align: center; }
}
@media only screen and (max-width:468px){
    #footer .inner { align-items: start; justify-content: left; }
    #footer .f-navi{ display: none; }
}


/* =========================================================================================
Btn
=========================================================================================*/
.btn{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 10px 0;
}
.btn a {
    font-family: "Noto Serif JP", serif;
    font-weight: 700;
    text-align: center;
    color: #000;
    border: 1px solid #000;
    min-width: 260px;
    padding: 0.9em 3.0em 0.8em 0.5em;
    position: relative;
}
.btn a::after{
    position: absolute;
    content: "";
    background: url(../images/common/arrow_right.svg) no-repeat center;
    background-size: contain;
    width: 1.125em;
    height: 100%;
    right: 1.26em;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.btn a:hover {
    color: #FFF;
    background-color:var(--base-font-color);
    text-decoration: none;
    transition:0.3s;
}
.btn a:hover::after{ background: url(../images/common/arrow_right_wh.svg) no-repeat center; }

/*color*/
.btn.white a{ color: #000; border-color: #000; background-color: #fff;}
.btn.white a::after{ background: url(../images/common/arrow_right.svg) no-repeat center; }
.btn.white a:hover { color: #fff; background-color:#000 ;}
.btn.white a:hover::after{ background: url(../images/common/arrow_right_wh.svg) no-repeat center; }

.btn.black a{ color: #FFF; border-color: var(--base-font-color); background-color:var(--base-font-color) ; }
.btn.black a::after{ background: url(../images/common/arrow_right_wh.svg) no-repeat center; }
.btn.black a:hover { color: var(--base-font-color); background-color:#FFF;}
.btn.black a:hover::after{ background: url(../images/common/arrow_right.svg) no-repeat center; }


/*size*/
.btn.large { font-size: 1.65em; font-weight: bold; }
.btn.large a { min-width: 600px; }

/*position*/
.btn.left{ justify-content: left; }
.btn.right{ justify-content: right; }

@media only screen and (max-width:820px){
    .btn.large a { min-width: 100%; }
}
@media only screen and (max-width:468px){
    .btn a { width: 100%; min-width: 100% !important; padding: 0.9em 1.0em 0.8em ;}
}



/* =========================================================================================
Page Top
=========================================================================================*/
#page-top {
    position: fixed;
    z-index: 99;
    bottom: 10px;
    right: 15px;
}
#page-top a {
    display: block;
    text-decoration: none;
    width: 40px;
    aspect-ratio: 1 / 1;
    line-height:1.0;
    font-weight: bold;
    background:var(--base-font-color) url(../images/common/arrow_up.svg) no-repeat center;
    background-size: 1.5em;
    text-indent: -9999px;
}
#page-top a:hover{
    background-color: var(--main-color);
}

@media only screen and (max-width:820px){
    
}
@media only screen and (max-width:468px){
    #page-top { bottom: 15px; right: 15px; }
}


/* =========================================================================================
Layout
=========================================================================================*/
#wrapper{
    position:relative;
    margin:0;
    padding:0;
    overflow: hidden;
}
#container{
    margin:0;
    padding-block:100px;
}
article{
    background: #FFF;
}
section{
    padding-block: 100px;
    padding-inline: 30px;
}
.inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    position:relative;
    box-sizing:border-box;
}
@media only screen and (max-width:1280px){
    #container{ padding-block: 60px 100px; }
}
@media only screen and (max-width:820px){
}
@media only screen and (max-width:468px){
    #container{ padding-block: 60px; }
    section{ padding-block: 60px; padding-inline: 20px; }
}


/*flex-item ---------------------------------------*/
.flex-box { display: flex; flex-wrap: wrap; gap: 50px; justify-content: space-between; }
.flex-box + .flex-box { margin-top: 50px; }
.flex-box:nth-of-type(even){ flex-direction: row-reverse; }
.flex-box .item { width: calc( ( 100% - 50px ) / 2 ); flex-grow: 1; }

@media only screen and (max-width:820px){
    .flex-box { gap: 25px; }
    .flex-box .item{ width: 100%; }
}
@media only screen and (max-width:468px){

}

/*target ---------------------------------------*/
#container a[target="_blank"] { 
    padding-right: 1.3em;
    background: url(../images/common/icon_link.svg) no-repeat right;
    background-size: 1em;
 }

/*midashi ---------------------------------------*/
h1, h2, h3, h4, h5 ,h6{ font-family: "Noto Serif JP", serif; line-height: 1.5; font-weight: 500; letter-spacing: 0.05em; margin: 0 0 1.5em 0; padding: 0; }
* + h2, * + h3, * + h4, * + h5 ,* + h6 { margin-top: 1.5em; }
h1 { font-size: 2.5em; margin: 0; line-height: 1.3; }
h2 { font-size: 2.625em; }
/*縦書き*/
h2.tit-v{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: end;
    gap: 5px;
}
h2.tit-v .jp{
    letter-spacing: 0.15em;
    border-top: 1px solid;
    border-bottom: 1px solid;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 2.0rem 0.25em;
}
h2.tit-v .en{
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding-bottom: 2.25rem;
    display: block;
    text-align: right;
}
/*横書き*/
h2.tit-h{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
h2.tit-h .jp{
    text-align: center;
    letter-spacing: 0.15em;
    border-bottom: 1px solid;
    padding:0.25em 2.0em;
}
h2.tit-h .en{
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.1em;
}
h3 {
    text-align: center;
    font-size: 1.625em;
    padding-bottom: 0.45em;
}
h4 {
    font-size: 1.25em;
    margin-bottom: 1.0em;
}
h5 { font-size: 1.25em; }
h6 { font-size: 1.0em; }

h2.tit-h .jp span,
h3 span,
h4 span{
    display: inline-block;
}

@media only screen and (max-width:820px){
    h1 { font-size: 1.8em; }
    h2 { font-size: 1.8em; }
    h2.tit-h .jp { padding-inline: 0.5em; }
}
@media only screen and (max-width:468px){
    h2.tit-v .jp { font-size: 1.75rem; line-height: 1.0; }
    h2.tit-v .en { font-size: 0.65rem; }
    h2.tit-h .jp{ font-size: 1.4rem; }
    h2.tit-h .en{ font-size: 0.75rem; }
}

/*Hr ---------------------------------------*/
hr{ width: 100%; max-width: 500px; height: 1px; border: none; background-color: #000; margin: 10vh auto; }

@media only screen and (max-width:820px){
    hr { width: 50%; }
}

/*table ---------------------------------------*/
table { margin: 3.0em 0; width: 100%; border-spacing:1; }
thead { margin: 0; }
caption { font-size: small; text-align: left; color: #808080; display: block; margin-bottom: 0.5em;}
th{ font-weight: bold; padding: 0.5em 1.0em; background: var(--main-color); color: #FFF; }
th span{ display: inline-block; }
td{ text-align: left; padding: 0.5em 1.0em; background: rgb(118, 22, 22 ,0.05); }

/*horizon*/
table.horizon thead { margin: 0; }
table.horizon thead th{ font-weight: bold; padding: 0.5em; background: var(--main-color); color: #FFF; white-space:nowrap; }
table.horizon tbody th{ text-align: left; font-weight: bold; padding: 0.5em 1.0em; color: #121212; background: rgb(118, 22, 22 ,0.15); }
table.horizon th span{ display: inline-block; }
table.horizon td{ text-align: center; padding: 0; background: rgb(118, 22, 22 ,0.05); }
table.horizon td .mb-title { display: none; /* mobile用タイトル */}
table.horizon td .value{ padding: 0.5em 1.0em; }


@media only screen and (max-width:820px){
    
    /*scroll*/
    table.scroll { display: block; overflow-x: scroll;}
    table.scroll tbody{ width: 1000px; display: block;}
    table.scroll th , table.scroll td { display:table-cell;}
    table.scroll th { text-align: center;}
    table.scroll tr:last-child th{ border-bottom: none; }

    /* 別で作成 */
    .scroll2 { display: block; white-space: nowrap;}
    .scroll2 table { width: 100%;}

    
}
@media only screen and (max-width:468px){

    th , td { display: block; }
    th { text-align: left; }

    /* 別で作成 打ち消し */
    .scroll2 th,  .scroll2 td { display: table-cell;}

    /*horizon*/
    table.horizon thead { display: none; }
    table.horizon tbody tr { display: grid; grid-template-columns: repeat( 3 , 1fr ) ; border-bottom: 5px solid var(--base-bg-color);}
    table.horizon tbody th{ grid-column: 1 / -1; background: #761616; color: #FFF; width: 100%;}
    table.horizon td { grid-column: span 1; display: flex; align-items: stretch; justify-content: left; flex-direction: column; }
    table.horizon td .mb-title { /*mobile用タイトル*/
        width: 100%;
        display: inline-block;
        text-align: center;
        font-weight: bold;
        padding: 0.5em 1.0em;
        background: rgb(118, 22, 22 ,0.15);
    }
    table.horizon td .value{
        width:100%;
        padding: 0.5em 1.0em;
    }
}

/*list ---------------------------------------*/
ul.list , ol.list{ margin:2.0em 0 2.0em 1.5em; }
ul.list li { position: relative; }
ul.list li:before{ content: ""; position: absolute; background: var(--main-color); width: 1.0em; aspect-ratio: 1 / 1; border-radius: 0; top: 0.5em; left: -1.5em; }

ol.list  {counter-reset: count 0; }
ol.list li { color: var(--main-color); position: relative; padding-left: 0.35em; list-style: none; counter-increment: count 1; }
ol.list li::before { content: counters(count, "-") "："; position: absolute; top:0; left: -1.25em; }
ol.list li ol { ounter-reset: count 0; margin:0.5em 0 0.5em 1.5em;}
ol.list li ol li { padding-left: 1.25em; }

ul.list li b , ol.list li b { display: block; color: var(--main-color); }

@media only screen and (max-width:820px){
    ul.list {
        margin-left: 1.5em;
    }
}


/*list-note ---------------------------------------*/
ul.note{ margin-left: 1.75em; list-style: none; }
ul.note.center{ width: fit-content; margin: auto; }
ul.note li{ text-indent: -1.5em;}
ul.note li:before{ content: "※"; position: static; background: none; margin-right: 0.5em; top: 0.2em; left: -1.0em; }

/*flow ---------------------------------------*/
ol.flow{ margin: 3.0em auto;}
ol.flow > li{ position: relative; border: 1px solid; padding: 2.0em 2.0em 2.0em 100px; list-style: none; counter-increment: step;}
ol.flow > li::before {
    font-family: "Noto Serif JP", serif;
    content: counter(step, decimal-leading-zero);
    position: absolute;
    color: #FFF;
    font-size: 35px;
    line-height: 1.0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #121212 !important;
    width: 70px;
    aspect-ratio: 1 / 1;
    top:0;
    left: 0;
}
ol.flow > li::after {
    content: "";
    position: absolute;
    background-color: var(--base-font-color);
    height: calc(30px / 2);
    width: 30px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    left: 50%;
    bottom: -34px;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
ol.flow > li:last-child::after { display: none; }
ol.flow > li + li { margin-top: 50px; }
ol.flow > li:before{ position: absolute; background: none; top: 0; left: 0; }
ol.flow li .title { font-size: 1.25em; font-weight: bold; border-bottom: 1px solid; padding-bottom: 0.25em; }
ol.flow li .title + * { margin-top: 1.0em; }
@media only screen and (max-width:820px){
    ol.flow > li{ padding: 1.0em 1.5em 1.5em 80px;}
    ol.flow > li::before { font-size: 30px; width: 60px; }
}
@media only screen and (max-width:468px){
    ol.flow > li{ padding: 1.0em 1.5em 1.5em 70px;}
    ol.flow > li::before { font-size: 25px; width: 50px; }
}

/*decoration ---------------------------------------*/
strong{ display: block; font-weight:bold; font-size: large; color: var(--main-color); margin: 2.0em 0;}

.serif{ font-family: "Noto Serif JP", serif; }

.red{color:#FF0000;font-weight:bold;}
.marker{padding:0 0.15em;display:inline;background:linear-gradient(transparent 65%, #FFF000 65%);}

.bg-red{ background-color: var(--main-color); color: #FFF;}
.bg-sub-color{ background-color: var(--sub-bg-color);}




/*プルダウンメニュー ---------------------------------------*/
/* 初期状態ではサブメニューを非表示に */
    .submenu {
        display: none;
    }
    
ul.sub-list {
    width: auto!important;
    display: block!important;
    position: absolute;
    list-style: none;
    padding: 0!important;
    margin: 0;
    z-index: 1000; /* メニューが他の要素に隠れないようにする */
    flex-wrap: wrap;
    top: 100px;
    left: -30px;
    background-color: var(--base-font-color);
}

/* サブメニューのアイテムのスタイル */
ul.sub-list li {
    width: 100%;
    white-space: nowrap;
    padding: 10px 20px;
    
}

ul.sub-list li a {
    text-decoration: none;
    color: #000;
    display: block;
}

ul.sub-list li a:hover {

}

.dropdown {
    position: relative;
}

/* スマートフォン（最大幅768px）向けの設定 */
@media (max-width: 768px) {
    .submenu {
        display: block!important; /* スマートフォンではサブメニューを常に表示 */
        
    }

    ul.sub-list {
        position:unset; /* サブメニューが通常のフロー内に表示されるように */
        background-color:unset;
        top: 0;
        left: 0;
        font-size: 0.9rem;
    }

    .dropdown {
        display: block; /* 親メニューと一緒にサブメニューを表示 */
    }
}


/*背景スクロールストップ ---------------------------------------*/
@media (max-width: 768px) {
/* メニューが開いているときのスタイル */
#header .menu-open {
    display: block;
    /* その他のスタイルを追加できます */
}

/* メニューが閉じているときのスタイル */
#g-navi-area {
    display: none;
}

/* ハンバーガーメニューのスタイル */
.openbtn {
    cursor: pointer;
}
}