/* フッター独立版CSS（他のデザインに影響しない） */

/* SPフッターボタン */
.footer-independent{
display:none;
}
@media screen and (min-width: 640px) {
.menu-independent-container{
display:none;
}
}
@media screen and (max-width: 640px) {
.footer-independent{
display:block;
padding:.5rem 0;
position:fixed;
bottom:0;
background:rgba(0,0,0,.8);
z-index:99;
width:100%;
}
.footer-independent p a{
display:flex;
justify-content:center;
width:80%;
margin:0 auto 4px;
background:#232323;
font-family: 'Jost', sans-serif;
font-size:2.4rem;
font-weight:700;
letter-spacing:.2rem;
color:#fff;
border-radius:100px;
padding:10px 0;
line-height:1;
}
.footer-independent p a::before{
font-family: 'Material Icons';
content: '\e0cd';
margin-right:3px;
position:relative;
top:1px;
}
.footer-independent span{
font-size:1.4rem;
font-weight:bold;
}
.footer-independent ul{
display:flex;
}
.footer-independent ul li{
width : calc(100% / 5) ;
}
.footer-independent ul li a{
display:block;
line-height:1.2;
padding:.5rem 0;
font-weight:bold;
font-size:1.1rem;
color:#fff;
text-align:center;
}
.footer-independent ul li a::before{
font-family: 'Material Icons';
content: '\e0cd';
display:block;
font-size:2.6rem;
}
.footer-independent ul li.sch a::before{
content: '\ebcc';
}
.footer-independent ul li.system a::before{
content: '\e850';
}
.footer-independent ul li.menu a::before{
content: '\e5d2';
}
.footer-independent ul li.member a::before{
content: '\e853';
}
.footer-independent ul li.tel a::before{
content: '\e0b0';
}
.footer-independent ul li.reserve a::before{
content: '\e163';
}
.footer-independent ul li.rec a::before{
content: '\e590';
}
.footer-independent ul li.ranking a::before{
content: '\e8d0';
}
.footer-independent ul li.top a::before{
content: '\f182';
}

/* 中央のメニュートグルボタン用スペース */
.footer-independent ul li.menu-toggle-independent{
position:relative;
}

/* フッターハンバーガー独立版 */
.menu-independent-container {
/* コンテナ設定なし */
}
.menu-independent-button {
cursor: pointer;
z-index: 100;
position:fixed;
left:50%;
bottom:-20px;
transform: translateX(-50%);
background:#fff;
border-radius:100px;
width:24%;
aspect-ratio:1;
border:4px solid rgba(0,0,0,.8);
/* 中央揃えのためのflexbox */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#menu-independent-toggle:checked ~ .menu-independent-button{
border:none;
}
.menu-independent-button > b{
display:block;
width:36px;
height:45px;
position:relative;
}
.menu-independent-button .txt{
margin-top: -6px;
text-align: center;
}
.menu-independent-button .txt::before{
content:"MENU";
font-weight:bold;
font-size:1.2rem;
}
#menu-independent-toggle:checked ~ .menu-independent-button .txt::before{
content:"CLOSE";
}

.bar-independent {
position:absolute;
display: block;
width:36px;
height: 4px;
background-color: #222;
transition: 0.4s;
left:0;
}
.menu-independent-button .bar-independent:nth-child(1){
top:6px;
}
.menu-independent-button .bar-independent:nth-child(2){
top:16px;
}
.menu-independent-button .bar-independent:nth-child(3){
top:26px;
}

#menu-independent-toggle:checked ~ .menu-independent-button .bar-independent:nth-child(1) {
rotate:45deg;
top:16px;
}
#menu-independent-toggle:checked ~ .menu-independent-button .bar-independent:nth-child(2) {
display:none;
}
#menu-independent-toggle:checked ~ .menu-independent-button .bar-independent:nth-child(3) {
rotate:-45deg;
top:16px;
}
#menu-independent-toggle {
display: none;
}
.menu-independent {
position: fixed;
bottom: -100%;
left: 0;
width: 100%;
height: 100%;
background:#5eb1e3;
transition: 0.4s;
z-index: 100;
overflow-y: auto;
}
#menu-independent-toggle:checked ~ .menu-independent {
bottom: 0;
}
.menu-independent .drawer-independent-logo{
border-bottom:2px dotted #fff;
padding:1rem 0;
text-align:center;
}
.menu-independent .drawer-independent-logo img{
width:280px;
}

.menu-independent ul {
list-style: none;
padding:2rem 1.4rem;
display:flex;
flex-wrap:wrap;
}
.menu-independent ul li{
width:50%;
text-align:left;
}
.menu-independent ul li a {
text-decoration: none;
color: #fff;
font-size:1.8rem;
font-weight:bold;
display: block;
padding: 10px 0;
transition: 0.2s;
line-height:1.3;
text-shadow:2px 2px 2px rgba(0,0,0,.15);
}
.menu-independent ul li a span{
display:block;
font-family: 'Jost', sans-serif;
font-size:1.2rem;
font-weight:500;
}
.menu-independent ul li a:hover {
color: #000;
}
}

/* メインフッター独立版 */
#footer-independent{
padding:50px;
text-align:center;
}
#footer-independent .logo-independent img{
width:200px;
height:auto;
margin-bottom:20px;
}
#footer-independent .footnav-independent{
display:flex;
justify-content:center;
flex-wrap:wrap;
margin:0 auto 20px;
max-width:800px;
}
#footer-independent .footnav-independent li:not(:last-child)::after{
content:"｜";
}
#footer-independent p{
font-size:13px;
}
@media screen and (max-width: 640px) {
#footer-independent{
padding:0 0 80px;
}
#footer-independent .logo-independent img{
width:160px;
}
#footer-independent .footnav-independent{
font-size:1.1rem;
padding:0 1.2rem;
display:none;
}
}