@charset "UTF-8"; :root { --board: 1200; --max: 1px; } @media screen and (max-width: 768px) { :root { --board: 390; --max: 9999px; } } html { font-size: clamp(1.5625%, 0.0833333333vw, 6.25%); } @media (max-width: 768px) { html { font-size: 0.2564102564vw; } } :root { --colorBlack: #222; --colorBg: #fff; --colorCurrent: #c7c7c7; } :root { --fontGothic: "Noto Sans JP", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; --fontMincho: "Zen Old Mincho", "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif; --fontEnglish: "Marcellus", serif; --fontMaru: "Zen Maru Gothic", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; } :root { --weightLight: 300; --weightRegular: 400; --weightMedium: 500; --weightBold: 700; } :root { --fontSize: 16rem; --letterSpacing: 0; --lineHeight: 1.75; --kerning: unset; } :root { --bodyBg: var(--colorBg); --speed: .4s; } :root { --logo-col: rgba(90, 45, 20, 1); --wh: rgba(255, 255, 255, 1); --black: rgba(0, 0, 0, 1); --black-20: rgba(0, 0, 0, .2); --black-5-opaque: rgba(242, 242, 242, 1); --ja-lg-body-small-1-bold-font-family: "Noto Sans JP", Helvetica; --ja-lg-body-small-1-bold-font-weight: 700; --ja-lg-body-small-1-bold-font-size: 14rem; --ja-lg-body-small-1-bold-letter-spacing: 0; --ja-lg-body-small-1-bold-line-height: 179.99999523162842%; --ja-lg-body-small-1-bold-font-style: normal; --action-element-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, .05); --colors-black: rgba(0, 0, 0, 1); --colors-white: rgba(255, 255, 255, 1); --spacing-spacing-2: 14rem; --spacing-spacing-1: 7rem; --font-size-small-1: 14rem; --font-size-small-1-300: 42rem; --corner-radius-corner-radius-1: 5rem; } /* To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so: You can apply the theme on any DOM node, not just the `body` */ [data-spacing-mode=lg] { --spacing-spacing-2: 14rem; --spacing-spacing-1: 7rem; } [data-spacing-mode=sm] { --spacing-spacing-2: 12rem; --spacing-spacing-1: 6rem; } [data-spacing-mode=md] { --spacing-spacing-2: 13.300000190734863rem; --spacing-spacing-1: 6.650000095367432rem; } [data-font-size-mode=lg] { --font-size-small-1: 14rem; --font-size-small-1-300: 42rem; } [data-font-size-mode=sm] { --font-size-small-1: 12rem; --font-size-small-1-300: 36rem; } [data-font-size-mode=md] { --font-size-small-1: 13.300000190734863rem; --font-size-small-1-300: 39.900001525878906rem; } @-webkit-keyframes name {} @keyframes name {} .cafe { position: relative; min-height: 100vh; --wrap: 922rem; } @media (max-width: 768px) { .cafe { --wrap: 100%; } } .cafe-button { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15rem; padding: 0 24rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 48rem; border-radius: 100rem; background-color: var(--logo-col); color: #fff !important; font-weight: 700; font-size: 16rem; line-height: 1; } .cafe-button::after { content: ""; display: block; width: 0.5em; height: 0.5em; border: 2rem solid; border-top: 0; border-left: 0; -webkit-transform: rotate(-45deg) translateY(1rem); transform: rotate(-45deg) translateY(1rem); } /* ---------- cafe mv ---------- */ .cafe__mv { position: relative; padding-top: 2.6388888889vw; } @media (max-width: 768px) { .cafe__mv { padding-top: 40rem; } } .cafe__mv-image { width: 100%; height: auto; } @media (max-width: 768px) { .cafe__mv-image { width: 390rem; } } .cafe__mv-copy { position: absolute; top: 2.6388888889vw; right: 11.4583333333vw; width: 14.4444444444vw; } @media (max-width: 768px) { .cafe__mv-copy { top: 40rem; right: 45rem; width: 112rem; } } .cafe__mv-copy img { width: 100%; height: auto; } @media (max-width: 768px) { .cafe__mv-copy img { width: 100%; height: auto; } } /* ---------- intro ---------- */ .cafe-intro { position: relative; padding: 160rem 0 240rem; margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .cafe-intro { padding: 80rem 25rem 128rem; } } .cafe-intro__title { position: relative; margin-bottom: 96rem; width: 100%; } @media (max-width: 768px) { .cafe-intro__title { margin-bottom: 80rem; } } .cafe-intro__text { margin-bottom: 2em; color: var(--logo-col); letter-spacing: 0.2em; font-weight: 700; font-size: 18rem; line-height: 2.4; } @media (max-width: 768px) { .cafe-intro__text { margin-bottom: 3em; } } .cafe-intro__text:last-of-type { margin-bottom: 0; } /* ---------- news ---------- */ .cafe-news { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .cafe-news { padding: 0 25rem; } } .cafe-news__frame { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 80rem; width: 922rem; } @media (max-width: 768px) { .cafe-news__frame { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40rem; width: 100%; } } .cafe-news__header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8rem; } .cafe-news__title { margin-bottom: 20rem; height: 25rem; color: var(--logo-col); letter-spacing: 0.1em; font-weight: 700; font-size: 34rem; line-height: 1.5; } @media (max-width: 768px) { .cafe-news__title { margin-bottom: 10rem; } } .cafe-news__title img { width: auto; height: 100%; } .cafe-news__subtitle { color: var(--logo-col); letter-spacing: 0.1em; font-weight: 700; font-size: 14rem; font-family: "Noto Sans JP-Bold", Helvetica; line-height: 1.5; } .cafe-news__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .cafe-news__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; } .cafe-news__item a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40rem; padding: 40rem 0; border-top: 1rem solid rgba(90, 45, 20, 0.2980392157); border-bottom: 1rem solid rgba(90, 45, 20, 0.2980392157); -webkit-transition: 0.3s; transition: 0.3s; } @media (hover: hover) { .cafe-news__item a:hover { opacity: 0.5 !important; } } @media (max-width: 768px) { .cafe-news__item a { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24rem; padding: 30rem 0; } } .cafe-news__date { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; color: var(--logo-col); letter-spacing: 0.1em; font-weight: 400; font-size: 14rem; font-family: "Noto Sans JP-Regular", Helvetica; line-height: 1.8; } .cafe-news__content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: var(--colors-black); letter-spacing: 0.1em; font-weight: 400; font-size: 14rem; font-family: "Noto Sans JP-Regular", Helvetica; line-height: 1.8; } /* ---------- menu ---------- */ .cafe-menu { padding: 168rem 0; } @media (max-width: 768px) { .cafe-menu { padding: 130rem 0; } } .cafe-menu__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-right: auto; margin-left: auto; width: 922rem; } @media (max-width: 768px) { .cafe-menu__inner { width: 100%; } } .cafe-menu__title { margin-bottom: 64rem; height: 26rem; } @media (max-width: 768px) { .cafe-menu__title { margin-bottom: 40rem; } } .cafe-menu__title img { width: auto; height: 100%; } .cafe-menu__container { display: -ms-grid; display: grid; gap: 68rem; -ms-grid-columns: 1fr 68rem 1fr 68rem 1fr; grid-template-columns: repeat(3, 1fr); } @media (max-width: 768px) { .cafe-menu__container { gap: 45rem; width: 262rem; -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); } } .cafe-menu__name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8rem; margin-top: 24rem; color: #5a2d14; letter-spacing: 0.1em; font-weight: 700; font-size: 16rem; line-height: 1.5; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } .cafe-menu__name::after { content: ""; display: block; margin: 0; width: 0.5em; height: 0.5em; border: 2rem solid; border-top: 0; border-left: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .cafe-menu__info { margin-top: 64rem; text-align: center; letter-spacing: 0.2em; font-size: 12rem; line-height: 1.8; } @media (max-width: 768px) { .cafe-menu__info { margin-top: 40rem; padding: 0 24rem; width: 100%; text-align: left; } } .cafe-menu__button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: 64rem; } /* ---------- gallery ---------- */ .cafe-gallery { width: 100%; } .cafe-gallery__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0; margin: 0; padding: 0; list-style: none; } .cafe-gallery__item { margin: 0; width: 25vw; height: 34.5138888889vw; } @media (max-width: 768px) { .cafe-gallery__item { width: 180rem; height: 249rem; } } .cafe-gallery__img { display: block; width: 100%; height: 100% !important; -o-object-fit: cover; object-fit: cover; } /* ---------- message ---------- */ .cafe-message { padding: 168rem 0; } @media (max-width: 768px) { .cafe-message { padding: 130rem 0; } } .cafe-message__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: auto; margin-left: auto; width: 922rem; } @media (max-width: 768px) { .cafe-message__inner { gap: 40rem; padding: 0 24rem; width: 100%; } } .cafe-message__title { margin-bottom: 64rem; width: 100%; height: 26rem; } .cafe-message__title img { width: auto; height: 100%; } .cafe-message__info { width: 534rem; } .cafe-message__subtitle { margin-bottom: 24rem; color: var(--logo-col); letter-spacing: 0.2em; font-weight: 700; font-size: 20rem; line-height: 2.4; } .cafe-message__text { color: var(--logo-col); letter-spacing: 0.19em; font-size: 14rem; line-height: 2.4; } @media (max-width: 768px) { .cafe-message__text { font-size: 16rem; } } .cafe-message__photo { width: 356rem; } @media (max-width: 768px) { .cafe-message__photo { width: 270rem; } } /* ---------- photo ---------- */ /* ---------- logo ---------- */ .cafe-info__wrapper { position: relative; } .cafe-info__logo { position: sticky; top: 0; left: 0; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100vh; height: 100dvh; -webkit-transform: translateZ(1px); transform: translateZ(1px); } .cafe-info__logo img { width: 632.18rem; height: 632.32rem; } @media (max-width: 768px) { .cafe-info__logo img { width: 284.08rem; height: 284.14rem; } } /* ---------- info ---------- */ .cafe-info { position: relative; z-index: 2; padding: 160rem 0; background-color: var(--logo-col); -webkit-transform: translateZ(1px); transform: translateZ(1px); } @media (max-width: 768px) { .cafe-info { padding: 104rem 24rem 137rem; } } .cafe-info__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 116rem; margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .cafe-info__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 80rem; } } .cafe-info__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 64rem; width: 356rem; } @media (max-width: 768px) { .cafe-info__content { padding-top: 0; } } .cafe-info__title { margin-bottom: 80rem; height: 25rem; color: #fff; letter-spacing: 0.1em; font-weight: 700; font-size: 36rem; font-family: "DIN Next LT Pro-Bold", Helvetica; line-height: 1.1; } .cafe-info__title img { width: auto; height: 100%; } .cafe-info__details { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 100%; } @media (max-width: 768px) { .cafe-info__details { width: 278rem; } } .cafe-info__address { margin-bottom: 24rem; color: var(--wh); letter-spacing: 0.2em; font-weight: 400; font-size: 14rem; font-family: "Noto Sans JP-Regular", Helvetica; line-height: 1.8; } .cafe-info__hours-group { margin-bottom: 24rem; } .cafe-info__hours-list { margin: 0; padding: 0; } .cafe-info__hours-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; color: var(--wh); letter-spacing: 0.2em; font-weight: 700; font-size: 16rem; line-height: 1.8; } .cafe-info__hours-text { margin-top: 16rem; color: var(--wh); letter-spacing: 0.2em; font-size: 14rem; line-height: 1.8; } .cafe-info__menu { margin-top: 16rem; } .cafe-info__menu-list { margin: 0 0 8rem 0; padding: 0; list-style: disc inside; } @media (max-width: 768px) { .cafe-info__menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 24rem; } } .cafe-info__menu-item { color: var(--wh); letter-spacing: 0.2em; font-weight: 400; font-size: 14rem; font-family: "Noto Sans JP-Regular", Helvetica; line-height: 1.8; } .cafe-info__menu-note { margin-top: 10rem; color: var(--wh); letter-spacing: 0.2em; font-weight: 400; font-size: 12rem; font-family: "Noto Sans JP-Regular", Helvetica; line-height: 1.8; } @media (max-width: 768px) { .cafe-info__menu-note { margin-top: 16rem; } } img.cafe-info__img { width: 450rem; height: 583rem; -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { img.cafe-info__img { margin-left: calc(50% - 50vw); max-width: none; width: 100vw; height: 368rem; } } .cafe-access { margin-right: auto; margin-left: auto; padding: 180rem 30rem 280rem; width: 1170rem; font-size: 14rem; } @media (max-width: 768px) { .cafe-access { padding: 128rem 24rem; width: 100%; } } /* ---------- Utility: visually hidden for accessibility ---------- */ .visually-hidden { position: absolute !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: -1rem !important; padding: 0 !important; width: 1rem !important; height: 1rem !important; border: 0 !important; } .cafe-gallery__swiper, .cafe-gallery__swiper-r { overflow: hidden; width: 100%; } .cafe-gallery__list { display: -webkit-box; display: -ms-flexbox; display: flex; width: -webkit-max-content; width: -moz-max-content; width: max-content; } /* 通常（左→右） */ .cafe-gallery__swiper .cafe-gallery__list { -webkit-animation: cafe-gallery-scroll-ltr 20s linear infinite; animation: cafe-gallery-scroll-ltr 20s linear infinite; } /* 逆方向（右→左） */ .cafe-gallery__swiper-r .cafe-gallery__list { -webkit-animation: cafe-gallery-scroll-rtl 20s linear infinite; animation: cafe-gallery-scroll-rtl 20s linear infinite; } .cafe-gallery__item { -ms-flex-negative: 0; flex-shrink: 0; margin-right: 0; /* スライド間の余白（必要に応じて調整） */ width: 25vw; /* 画像の幅に合わせて調整（レスポンシブなら%などに） */ } @media (max-width: 768px) { .cafe-gallery__item { width: 50vw; } } .cafe-gallery__img { display: block; width: 100%; height: auto; } @-webkit-keyframes cafe-gallery-scroll-ltr { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes cafe-gallery-scroll-ltr { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes cafe-gallery-scroll-rtl { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes cafe-gallery-scroll-rtl { 0% { -webkit-transform: translateX(-50%); transform: translateX(-50%); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .cafe__rice { position: absolute; top: 50%; left: 50%; width: 1.6666666667vw; height: 2.5694444444vw; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cafe__mv-image { /* 外部SVGをマスクとして指定 */ -webkit-mask-image: url("/jp/komegallery/assets/img/cafe/mask_rice.svg"); mask-image: url("/jp/komegallery/assets/img/cafe/mask_rice.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 1.6666666667vw 2.5694444444vw; mask-size: 1.6666666667vw 2.5694444444vw; /* 必要に応じて位置調整 */ -webkit-mask-position: center; mask-position: center; } .cafe__mv-bg { position: relative; -webkit-animation-name: cafe-mv-base; animation-name: cafe-mv-base; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .cafe__mv-image { -webkit-animation-name: cafe-mv-animation; animation-name: cafe-mv-animation; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .cafe__rice { -webkit-animation-name: cafe-mv-fadeout; animation-name: cafe-mv-fadeout; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .cafe__logo, .cafe__mv-copy { opacity: 0; -webkit-animation-name: cafe-mv-fade; animation-name: cafe-mv-fade; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-delay: 2.2s; animation-delay: 2.2s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes cafe-mv-animation { 0% { -webkit-mask-size: 2.5694444444vw 2.5694444444vw; mask-size: 2.5694444444vw 2.5694444444vw; } 100% { -webkit-mask-size: 385.4166666667vw 385.4166666667vw; mask-size: 385.4166666667vw 385.4166666667vw; } } @keyframes cafe-mv-animation { 0% { -webkit-mask-size: 2.5694444444vw 2.5694444444vw; mask-size: 2.5694444444vw 2.5694444444vw; } 100% { -webkit-mask-size: 385.4166666667vw 385.4166666667vw; mask-size: 385.4166666667vw 385.4166666667vw; } } @-webkit-keyframes cafe-mv-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes cafe-mv-fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes cafe-mv-fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes cafe-mv-fadeout { 0% { opacity: 1; } 100% { opacity: 0; } } /* ---------- 下層ページ ---------- */ .cafe-item { margin-right: auto; margin-left: auto; padding: 60rem 0 160rem; color: #6e4530; letter-spacing: 0.1em; } @media (max-width: 768px) { .cafe-item { padding-bottom: 109rem; } } .cafe-item__head { padding-bottom: 40rem; text-align: center; font-weight: bold; font-size: 48rem; } .cafe-item__head img { width: auto; height: 33.5rem; } @media (max-width: 768px) { .cafe-item__head img { height: 26rem; } } .cafe-item__section { padding: 80rem 0 109rem; border-top: 1px solid; } @media (max-width: 768px) { .cafe-item__section { margin-right: 24rem; margin-left: 24rem; padding-top: 60rem; padding-bottom: 64rem; } } .cafe-item__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: auto; width: 1111rem; } @media (max-width: 768px) { .cafe-item__inner { width: 100%; } } .cafe-item__title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; margin-bottom: 40rem; letter-spacing: 0.2em; font-weight: 700; font-size: 36rem; line-height: 1.8; } @media (max-width: 768px) { .cafe-item__title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 28rem; } } .cafe-item__title span { font-size: 28rem; } @media (max-width: 768px) { .cafe-item__title span { font-size: 20rem; } } .cafe-item__text { width: 542rem; font-size: 14rem; line-height: 1.8; } @media (max-width: 768px) { .cafe-item__text { width: 100%; font-size: 16rem; } } .cafe-item__info { display: block; margin-top: 16rem; font-size: 12rem; } .cafe-item__container { display: -ms-grid; display: grid; gap: 80rem 21rem; margin: 80rem 0; -ms-grid-columns: 1fr 21rem 1fr 21rem 1fr 21rem 1fr; grid-template-columns: repeat(4, 1fr); } @media (max-width: 768px) { .cafe-item__container { gap: 40rem; margin-top: 40rem; margin-bottom: 40rem; -ms-grid-columns: 1fr; grid-template-columns: repeat(1, 1fr); } } @media (max-width: 768px) { .cafe-item__box { position: relative; padding-left: 175rem; min-height: 159rem; } } .cafe-item__image { width: 100%; } @media (max-width: 768px) { .cafe-item__image { position: absolute; top: 0; left: 0; width: 159rem; } } .cafe-item__name { margin-top: 24rem; margin-bottom: 16rem; font-weight: 700; font-size: 18rem; line-height: 1.6; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media (max-width: 768px) { .cafe-item__name { margin-top: 0; font-size: 14rem; } .cafe-item__name br { display: none; } } .cafe-item__desc, .cafe-item__price { margin-top: 8rem; font-size: 14rem; line-height: 2; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media (max-width: 768px) { .cafe-item__desc, .cafe-item__price { margin-top: 4rem; } } .cafe-item__desc i, .cafe-item__price i { font-style: normal; font-size: 10rem; } .cafe-item__caution { font-size: 12rem; } @media (max-width: 768px) { .cafe-item__caution { -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } } .cafe-item__media { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 21rem; margin-top: 80rem; width: 733rem; } @media (max-width: 768px) { .cafe-item__media { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16rem; margin-top: 40rem; width: 254rem; } } .cafe-item__photo { width: 261rem; } @media (max-width: 768px) { .cafe-item__photo { width: 100%; } } .cafe-item__body { width: 451rem; } @media (max-width: 768px) { .cafe-item__body { width: 100%; } } .cafe-item__body-title { margin-bottom: 24rem; font-weight: 700; font-size: 18rem; line-height: 1.6; } @media (max-width: 768px) { .cafe-item__body-title { font-size: 14rem; } } @media (max-width: 768px) { .cafe-item__price + .cafe-item__desc { margin-top: 16rem; } } @media (max-width: 768px) { .cafe-item__desc > .cafe-item__caution { display: block; margin-top: 40rem; margin-left: calc(50% - 50vw); max-width: none; width: 100vw; text-align: center; } } @media (max-width: 768px) { .cafe-item__section + .cafe-menu__button { margin-top: 40rem; } } @media (min-width: 769px) { .pc-none { display: none !important; } } @media (max-width: 768px) { .sp-none { display: none !important; } } /*# sourceMappingURL=cafe-style.css.map */