header { min-height: 300px; position: relative; } .scroll-menu { font-size: 14px; padding: 4px 0 0 0; position: absolute; top: 0; width: 100%; z-index: 2; ul { height: 48px; outline: none; } li { border-right: 1px solid $border_dark; white-space: nowrap; &:last-child { border-right: none; } } a { display: block; padding: 8px 16px; } } .scroll-menu .flickity-page-dots { bottom: -2px; } .scroll-menu .flickity-page-dots .dot { border-radius: 4px; height: 3px; margin: 0; width: 36px; } .header-inner { margin: 0 auto; padding: 48px 8px 0 8px; position: absolute; text-align: center; top: 60px; width: 98%; z-index: 2; } .header-cover { position: absolute; top: 0; width: 100%; z-index: 1; img { background-size: cover; -webkit-filter: brightness(75%); filter: brightness(75%); height: 300px; width: auto; //mobile } } .breadcrumb { padding: 348px 8px 0 8px; ol { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; } li { padding: 0 8px 0 0; } } @include media(sp) { .scroll-menu .flickity-page-dots { bottom: -12px; } .site-title { font-size: 20px; } } @include media(pc) { .header-cover img { width: 100%; } }