/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; font-size: 100%; scroll-behavior: smooth; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { display: block; max-inline-size: 100%; width: 100%; max-width: 100%; max-block-size: 100%; -o-object-fit: cover; object-fit: cover; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; line-break: after-white-space; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } body { position: relative; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 0.875rem; line-height: 1.5; color: #fff; background-color: #333; } a, span, iframe { display: block; } iframe { width: 100%; height: 100%; } button { cursor: pointer; } .inner { padding: 0 5%; } .section, .l-footer { padding: 100px 0; } .section-title { margin-bottom: 50px; font-size: 1.5rem; font-weight: bold; } .button { position: fixed; right: 5%; bottom: 50px; width: 40px; height: 40px; background-color: #222; transition: all 0.3s; } .button::after { position: absolute; top: 45%; left: 50%; width: 15px; height: 15px; pointer-events: none; content: ""; border-top: 1px solid #fff; border-left: 1px solid #fff; transform: translateX(-50%) rotate(45deg); } .button__link { height: 100%; } .button.hidden { visibility: hidden; opacity: 0; } .button.visible { visibility: visible; opacity: 1; } .post-link, .nav-links { display: flex; justify-content: space-between; width: 250px; margin-top: 50px; margin-right: auto; margin-left: auto; } .text { overflow-wrap: break-word; white-space: pre-wrap; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { body { font-size: 1rem; } .inner { width: 60%; margin: 0 auto; } .section-title { font-size: 2rem; text-align: center; } .section-title--left { text-align: left; } } .l-footer { color: #000; background-color: #fff; } .l-footer__container { margin-bottom: 50px; } .l-footer__logo { width: 200px; margin: 0 auto 10px; } .l-footer__list { display: flex; flex-wrap: wrap; gap: 10px 0; margin-bottom: 50px; } .l-footer__item { padding-right: 15px; margin-right: 15px; border-right: 1px solid #000; } .l-footer__item:last-child { padding-right: 0; margin-right: 0; border-right: none; } .address { margin-bottom: 50px; } .copyright { font-size: 0.75rem; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { .l-footer__inner { display: flex; flex-direction: column; align-items: center; } } .l-header { position: fixed; top: 0; left: 0; z-index: 1; width: 100%; padding: 10px 0; background-color: rgba(51, 51, 51, 0.8); } .l-header__inner { display: flex; align-items: center; justify-content: space-between; } .site-title { font-size: 1.125rem; font-weight: bold; } .l-header__nav { position: absolute; top: 100%; right: 0; height: calc(100vh - 48px); padding: 40px; background-color: rgba(51, 51, 51, 0.8); transition: 0.3s; transform: translateX(100%); } .l-header__nav.active { transform: translateX(0); } .l-header__item { margin-bottom: 30px; } .l-header__container { display: flex; align-items: center; } .tel { display: none; } .hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 20px; height: 16px; margin-left: 20px; } .line { width: 100%; height: 2px; background-color: #fff; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { .l-header { height: 114px; padding: 20px 0; } .l-header__inner { width: auto; } .site-title { font-size: 1.5rem; white-space: nowrap; } .l-header__nav { position: static; height: auto; padding: 0; font-size: 1.25rem; background-color: initial; transform: translateX(0); } .l-header__list { display: flex; flex-wrap: wrap; align-items: center; margin: 0 50px; } .l-header__item { margin-right: 30px; margin-bottom: 0; } .l-header__item:nth-last-child(2) { margin-right: 0; } .l-header__container { flex-direction: column; align-items: flex-start; } .tel { display: block; font-size: 1.25rem; white-space: nowrap; } .hamburger { display: none; } } .l-main { background-image: url("images/image.png"); background-repeat: round; background-attachment: fixed; background-size: 150px; } .news, .about, .menu__image--main, .information { transition: all 1s; } .lunch, .dinner { transition: opacity 2s, transform 1s; } .news.hidden, .about.hidden, .menu__image--main.hidden, .lunch.hidden, .dinner.hidden, .information.hidden { visibility: hidden; opacity: 0; } .news.visible, .about.visible, .menu__image--main.visible, .lunch.visible, .dinner.visible, .information.visible { visibility: visible; opacity: 1; } .news.hidden, .about.hidden, .menu__image--main.hidden, .information.hidden { transform: translateY(10%); } .news.visible, .about.visible, .menu__image--main.visible, .information.visible { transform: translateY(0); } .lunch.hidden { transform: translateX(-100%); } .dinner.hidden { transform: translateX(100%); } .lunch.visible, .dinner.visible { transform: translateX(0); } /************************************************ mainvisual ************************************************/ .mainvisual { position: relative; height: 100vh; } .mainvisual__image { position: absolute; top: 0; left: 0; height: 100%; opacity: 0; animation: switch-images 30s infinite; } @keyframes switch-images { 0% { opacity: 0; } 5% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } .mainvisual__image:nth-of-type(1) { animation-delay: 0s; } .mainvisual__image:nth-of-type(2) { animation-delay: 5s; } .mainvisual__image:nth-of-type(3) { animation-delay: 10s; } .mainvisual__image:nth-of-type(4) { animation-delay: 15s; } .mainvisual__image:nth-of-type(5) { animation-delay: 20s; } .mainvisual__image:nth-of-type(6) { animation-delay: 25s; } .mainvisual__logo { position: absolute; top: 40%; right: 10%; width: 150px; } .mainvisual__image--animation-none { opacity: 1; animation: none; } .mask { position: absolute; bottom: 0; left: 0; width: 100%; height: calc(200px + 1.5rem); background-color: rgba(51, 51, 51, 0.8); } .mask__inner { display: flex; justify-content: center; height: 100px; overflow: hidden; } .mask__line { width: 2px; height: 100px; background-color: #fff; animation: line 3s infinite; } @keyframes line { 0% { transform: translateY(-100%); } 50% { opacity: 1; transform: translateY(0); } 100% { transform: translateY(100%); } } .page-title { padding: 50px 0; font-size: 1.5rem; font-weight: bold; line-height: 1; text-align: center; } /************************************************ news ************************************************/ .article { padding: 20px 0; border-top: 1px solid #fff; } .news__article { border-top: none; } .article:last-child { padding-bottom: 0; } .article-title { margin-bottom: 20px; font-size: 1rem; font-weight: bold; } .news__image { height: 200px; margin-bottom: 20px; } /************************************************ about ************************************************/ .about__image { margin-bottom: 20px; } .page-heading { margin-bottom: 20px; font-size: 1rem; font-weight: bold; text-align: center; } .about__description { margin-bottom: 20px; } /************************************************ menu ************************************************/ .menu__image { margin-top: 20px; } .menu__image--main { margin: 0 auto 20px; } .menu__container { overflow: hidden; } .lunch__article, .dinner__article { padding: 5%; margin-bottom: 50px; background-color: rgba(0, 0, 0, 0.4); } .lunch__article:last-child, .dinner__article:last-child { margin-bottom: 0; } .lunch__container, .dinner__container { text-align: center; } .lunch__title, .dinner__title { margin-bottom: 20px; } .lunch { margin-bottom: 50px; } .price { padding: 20px 0; margin: 40px 0; font-size: 2rem; border-top: 1px dotted #fff; border-bottom: 1px dotted #fff; } .lunch__image, .dinner__image { height: 400px; } /************************************************ information ************************************************/ .information__container { margin-bottom: 50px; } .dl-info { padding: 5%; background-color: rgba(0, 0, 0, 0.4); } .title { margin-bottom: 10px; font-size: 1rem; font-weight: bold; } .dd { margin-bottom: 20px; } .dd:last-child { margin-bottom: 0; } .information__dd { margin-bottom: 50px; } .google-map { height: 300px; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { /************************************************ mainvisual ************************************************/ .mainvisual__logo { width: 300px; } /************************************************ news ************************************************/ .news__container { display: flex; flex-wrap: wrap; gap: 50px 10%; justify-content: center; } .article { width: 45%; padding: 2.5%; background-color: rgba(0, 0, 0, 0.4); border-top: none; } .article:last-child { padding-bottom: 2.5%; } .news__article { width: auto; } .article-title { height: 60px; overflow: hidden; font-size: 1.25rem; } .article-description { height: 48px; overflow: hidden; } .news__image { height: 15vw; } /************************************************ about ************************************************/ .about__inner { width: auto; padding: 0; } .about__container { display: flex; } .about__image { width: 60%; margin-bottom: 0; } .page-heading { font-size: 1.25rem; } /************************************************ menu ************************************************/ .menu { background-color: rgba(255, 255, 255, 0.3); } .menu__image--main { width: 50%; } .lunch__image, .dinner__image { height: 500px; } .menu__container { display: flex; justify-content: space-between; padding: 0 5%; margin: 0 auto; } .lunch, .dinner { width: 45%; } .lunch__inner, .dinner__inner { display: flex; flex-wrap: wrap; gap: 50px 5%; justify-content: center; width: 100%; } .lunch__article, .dinner__article { width: 30%; padding: 2.5%; margin-bottom: 0; } .lunch { margin-bottom: 0; } .dinner { display: flex; flex-direction: column; margin-top: 200px; } .dinner__container { order: -1; } .dinner__image { margin-top: 0; margin-bottom: 20px; } /************************************************ information ************************************************/ .dl { display: flex; flex-wrap: wrap; width: 500px; margin: 0 auto; } .dl-info { width: 600px; } .dt { width: 30%; } .title { font-weight: bold; } .dd { width: 70%; margin-bottom: 50px; } .information__container:last-child { margin-bottom: 0; } } .c-reservation-button { padding: 5px 10px; font-weight: bold; color: #000; white-space: nowrap; background-color: #fff; transition: all 0.3s; } .c-reservation-button:hover { color: #fff; background-color: #000; } .c-section-button { display: inline-block; padding-left: 30px; margin-top: 50px; font-size: 0.75rem; } .c-section-button__link { position: relative; border: 1px solid #fff; } .c-section-button__link::after { position: absolute; top: 50%; left: -30px; width: 40px; height: 1px; content: ""; background-color: #fff; transform: translateY(-1px); } .c-button { position: relative; padding: 5px 20px; overflow: hidden; } .c-button::after { position: absolute; inset: 0; content: ""; background-color: #fff; transition: all 0.3s; transform: translateX(100%); } .c-button:hover::after { transform: translateX(0); } .c-button__span { transition: all 0.3s; } .c-button:hover .c-button__span { position: relative; z-index: 1; color: #000; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { .c-reservation-button--tel { display: none; } .c-reservation-button { margin-bottom: 10px; } .c-section-button { display: flex; justify-content: center; font-size: 1rem; } .c-section-button--left { justify-content: flex-start; } } .u-main { margin-top: 48px; } .u-lunch { margin-bottom: 0; } .u-dinner { margin-top: 0; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { .u-main { margin-top: 114px; } .u-discription { padding: 0 10%; } .u-inner { padding: 0; } } .u-inner { justify-content: space-evenly; } .u-news__container { justify-content: center; } .u-news__image { height: auto; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { .u-inner { width: 100%; } .u-lunch, .u-dinner { width: 100%; } } .u-reservation-button { font-size: 0.75rem; } /************************************************ PC ************************************************/ @media screen and (min-width: 1024px) { .u-reservation-button { font-size: 1rem; } } .single__image { height: auto; }/*# sourceMappingURL=style.css.map */