/* デモ用CSS */
body{
    width: 100%;
    background-color: #e2e2e2 !important;
}

.demo-wrap,
.header_box .header,
footer {
  max-width: 700px;
  width: 100%;
  margin-inline: auto; 
}

.demo-wrap,
.header_box .header{
    background-color: #ffffff;
}

.demo-wrap{
    padding-top: 45px;
    min-height: 100vh;
}

.demo-wrap .breadclumb {
    padding-top: 7px !important;
}


.header_box {
   position: fixed;
    top: 0; left: 0; right: 0;
    height: 45px;
    z-index: 1000;
    display: block;
    box-sizing: border-box;
}

.header_box header,
.header_box .view 
{
    max-width: 700px;
    width: 100%;
    margin-inline: auto;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
}

.header_box .demo-logo img {
    display: flex;
    height: 30px;
    justify-content: center;
    object-fit: cover;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.modal-open .header_box {
  padding-right: 15px;
}

.modal-open .header_box,
.modal-open .header_box:has(.hamburger-panel.is-open) {
  padding-right: 0;
}