@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; } } .school__news-more { display: none; } .rice .school a { -webkit-transition: opacity var(--speed) ease; transition: opacity var(--speed) ease; } @media (hover: hover) { .rice .school a:hover { opacity: 0.7; } } .header-compact__list a, .header-compact__list button { font-family: var(--fontGothic); } .school { position: relative; z-index: 0; min-height: 100vh; background-color: #f9f7f4; --wrap: 1110rem; } @media (max-width: 768px) { .school { --wrap: 100%; } } .school__button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 7rem; padding: 0 40rem; min-width: 300rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 56rem; border: none; border-radius: 9999rem; text-align: center; text-decoration: none; font-weight: 700; font-size: 20rem; line-height: 1.8; cursor: pointer; -webkit-transition: opacity var(--speed) ease; transition: opacity var(--speed) ease; } @media (max-width: 768px) { .school__button { padding: 0 24rem; } } @media (hover: hover) { .school__button:hover { opacity: 0.8; } } .school__button--primary { background-color: #dc1e37; -webkit-box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.05); box-shadow: 0 1rem 2rem 0 rgba(0, 0, 0, 0.05); color: #fff !important; } .school__button--primary.is-disabled { display: none; background-color: rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.3) !important; cursor: not-allowed; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .school__button--secondary { border: 2rem solid #dc1e37; background-color: #fff; color: #dc1e37 !important; } .school__button--outline { position: relative; padding: 0 14rem; padding-right: 30rem; min-width: 122rem; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; height: 42rem; border: 1rem solid rgba(0, 0, 0, 0.2); border-radius: 5rem; background-color: #fff; color: #000 !important; font-size: 14rem; } .school__button--outline::after { content: ""; position: absolute; top: 50%; right: 14rem; display: block; width: 0.5em; height: 0.5em; border: 1px solid; border-top: 0; border-left: 0; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .school__mv-buttons .school__button { width: 100%; } /* ---------- MV ---------- */ .school__mv { position: relative; z-index: 10; overflow: hidden; background-image: url("/jp/komegallery/assets/img/school/bg_mv.webp"); background-position: top 17rem center; background-size: 1366rem; background-repeat: no-repeat; } @media (max-width: 768px) { .school__mv { background-image: url("/jp/komegallery/assets/img/school/bg_mv_sp.webp"); background-position: top 44rem center; background-size: 351rem; } } .school__mv-inner { position: relative; z-index: 10; height: 100%; margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .school__mv-inner { padding-right: 25rem; padding-left: 25rem; } } @media (max-width: 768px) { .school__mv-inner { padding: 0; } } .school__mv-slider { position: absolute; top: 132rem; right: 0rem; width: 638rem; height: 638rem; } @media (max-width: 768px) { .school__mv-slider { top: 10rem; right: 50%; width: 478.5rem; height: 478.5rem; -webkit-transform: translateX(50%); transform: translateX(50%); } } .school__mv-slider-mask { position: relative; overflow: hidden; width: 100%; height: 100%; -webkit-mask-image: url("/jp/komegallery/assets/img/school/mask_mv.webp"); mask-image: url("/jp/komegallery/assets/img/school/mask_mv.webp"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .school__mv-slider-mask::after { content: ""; position: absolute; border-radius: 50%; -webkit-box-shadow: inset 0 0 0 2rem rgba(220, 30, 55, 0.1); box-shadow: inset 0 0 0 2rem rgba(220, 30, 55, 0.1); pointer-events: none; inset: 0; } .school__mv-slider-track { display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 0; -webkit-transition: opacity 800ms ease-out; transition: opacity 800ms ease-out; --slide-loop-distance: -2560rem; } @media (max-width: 768px) { .school__mv-slider-track { --slide-loop-distance: -1280rem; } } .school__mv-slider-track img { -ms-flex-negative: 0; flex-shrink: 0; width: 640rem; height: 640rem; -o-object-fit: cover; object-fit: cover; } @media (max-width: 768px) { .school__mv-slider-track img { width: 478.5rem; height: 478.5rem; } } .school__mv-slider-item { width: 100%; height: 100%; } .school__mv-slider-filter { width: 100%; height: 100%; background-color: #dc1e37; } .school__mv-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; margin: 0 auto; padding: 175rem 0 86rem; } @media (max-width: 768px) { .school__mv-content { padding: 511rem 0 0; width: 364.44rem; } } .school__mv-subtitle { margin-bottom: 40rem; color: #373324; text-align: center; letter-spacing: 0.15em; font-weight: 700; font-size: 18rem; line-height: 1.7; } @media (max-width: 768px) { .school__mv-subtitle { margin-bottom: 30rem; font-size: 16rem; } } .school__mv-title-wrapper { position: relative; 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; } .school__mv-title { position: relative; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 66rem; width: 486rem; } @media (max-width: 768px) { .school__mv-title { margin-bottom: 40rem; width: 100%; } } .school__mv-buttons { 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; gap: 16rem; margin: 0 auto; } .school__mv-button-label { color: #373324; text-align: center; letter-spacing: 0.1em; font-weight: 700; font-size: 16rem; line-height: 1.6; } @media (max-width: 768px) { .school__mv-button-label { font-size: 14rem; } } /* ---------- News ---------- */ .school__news { position: relative; padding: 82rem 0 0; background-color: #f9f7f4; } @media (max-width: 768px) { .school__news { padding: 167rem 0 0; padding-bottom: 149rem; } .school__news::before { content: ""; position: absolute; top: 28rem; left: 27rem; width: 340rem; height: 153rem; background-image: url("/jp/komegallery/assets/img/school/bg_mv-bottom_sp.webp"); background-position: center; background-size: 340rem; background-repeat: no-repeat; } } .school__news-inner { margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .school__news-inner { padding-right: 25rem; padding-left: 25rem; } } .school__news-title { margin-bottom: 35rem; color: #000; font-weight: 700; font-size: 28rem; line-height: 1.5; text-box: trim-both cap alphabetic; } @media (max-width: 768px) { .school__news-title { margin-bottom: 30rem; font-size: 24rem; } } .school__news-list { margin: 0; padding: 0; list-style: none; } .school__news-item { border-top: 1rem solid rgba(0, 0, 0, 0.1); } .school__news-item:last-child { border-bottom: 1rem solid rgba(0, 0, 0, 0.1); } .school__news-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 14rem; padding: 21rem 0 15rem; color: #000 !important; text-box: trim-both cap alphabetic; } @media (hover: hover) { .school__news-link:hover { opacity: 0.7; } } @media (max-width: 768px) { .school__news-link { gap: 12rem; padding: 18rem 0 14rem; } } .school__news-link.is-disabled { cursor: not-allowed; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .school__news-text { color: #000; font-size: 16rem; line-height: 1.8; } @media (max-width: 768px) { .school__news-text { font-size: 14rem; } } .school__news-text span { margin-left: 1em; font-size: 0.7em; } @media (max-width: 768px) { .school__news-text span { display: block; margin-left: 0; } } .school__news-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14rem; } .school__news-badge { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 0 7rem; height: 22.4rem; border: 1rem solid rgba(0, 0, 0, 0.2); border-radius: 9999rem; background-color: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.5); font-weight: 700; font-size: 11.2rem; line-height: 1.8; } .school__news-date { color: #000; font-size: 11.2rem; line-height: 1.8; } @media (max-width: 768px) { .school__news-date { font-size: 10rem; } } .school__news-more { margin-top: 35rem; text-align: center; } @media (max-width: 768px) { .school__news-more { margin-top: 30rem; } } /* ---------- Content ---------- */ .school__content { position: relative; z-index: 2; } .school__content > * { position: relative; z-index: 1; } /* ---------- Hero Visual ---------- */ .school__hero-visual { position: sticky; top: 0; z-index: 0; padding-top: 172rem; } @media (max-width: 768px) { .school__hero-visual { padding: 10vh 0; } } .school__hero-visual-wrapper { position: relative; width: 100%; } .school__hero-visual-image { display: block; width: 100%; height: auto; } @media (max-width: 768px) { .school__hero-visual-image { height: 80vh !important; -o-object-fit: cover; object-fit: cover; } } /* ---------- About ---------- */ .school__about { position: relative; padding: 160rem 0 0; } @media (max-width: 768px) { .school__about { padding: 80rem 0 0; } } .school__about .school__decoration--about-left { top: 0; left: 54rem; width: 271rem; height: 1613rem; } @media (max-width: 768px) { .school__about .school__decoration--about-left { left: 20rem; width: 140rem; height: 800rem; } } .school__about .school__decoration--about-right { top: 0; right: 85rem; width: 271rem; height: 1613rem; -webkit-transform: rotate(180deg) scaleY(-1); transform: rotate(180deg) scaleY(-1); } @media (max-width: 768px) { .school__about .school__decoration--about-right { right: 20rem; width: 140rem; height: 800rem; } } .school__about-inner { position: relative; 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; padding-bottom: 596rem; background-color: #f9f7f4; } @media (max-width: 768px) { .school__about-inner { padding-top: 0; padding-bottom: 349rem; } } .school__about-inner > * { position: relative; z-index: 1; } .school__about-inner::before { content: ""; position: absolute; top: -261rem; left: 50%; z-index: 0; display: block; max-width: 100%; width: 1332rem; height: 1613rem; background-image: url("/jp/komegallery/assets/img/school/bg_about.webp"); background-position: center; background-size: 1332rem; background-repeat: no-repeat; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 768px) { .school__about-inner::before { top: -340rem; height: calc(100% + 349rem); background-image: url("/jp/komegallery/assets/img/school/bg_about_sp.webp"); background-position: top 149rem center; background-size: 100%; pointer-events: none; } } .school__about-icon { margin-top: 164rem; width: 165rem; height: 320rem; } @media (max-width: 768px) { .school__about-icon { margin-top: 129rem; width: 82.5rem; height: 160rem; } } .school__about-icon img { display: block; width: 100%; height: auto; } .school__about-title { margin-top: 80rem; color: #373324; text-align: center; letter-spacing: 2rem; font-weight: 700; font-size: 40rem; line-height: 1.6; text-box: trim-both cap alphabetic; } @media (max-width: 768px) { .school__about-title { letter-spacing: 0.05em; font-size: 32rem; } } .school__about-text { margin-top: 40rem; margin-bottom: 80rem; color: #373324; text-align: center; font-size: 20rem; line-height: 1.8; text-box: trim-both cap alphabetic; } @media (max-width: 768px) { .school__about-text { font-size: 18rem; } } .school__about-text p { margin-bottom: 0; } .school__mv-button-label + .school__about-link { margin-top: clamp(0px, 10vw / var(--board) * 10 * 10, var(--max) * 10); } @media (max-width: 768px) { .school__about .school__about-link { 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: 208rem; height: 56rem; font-size: 16rem; } } /* ---------- Section Title ---------- */ .school__section-title { position: relative; padding-top: 40rem; color: #373324; letter-spacing: 0.05em; font-weight: 700; font-size: 32rem; line-height: 1.7; text-box: trim-both cap alphabetic; } @media (max-width: 768px) { .school__section-title { padding-top: 24rem; font-size: 24rem; } } .school__section-title::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 104rem; height: 4rem; background-color: #dc1e37; } @media (max-width: 768px) { .school__section-title::before { width: 80rem; } } /* ---------- Enjoy ---------- */ .school__enjoy { position: relative; padding: 80rem 0 82rem; background-color: #f9f7f4; } @media (max-width: 768px) { .school__enjoy { padding: 0; padding-bottom: 160rem; } } .school__enjoy .school__decoration-title { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 60rem; color: #373324; letter-spacing: 0.05em; font-weight: 700; font-size: 40rem; line-height: 1.7; } @media (max-width: 768px) { .school__enjoy .school__decoration-title { margin-bottom: 80rem; text-align: center; font-size: 32rem; text-box: trim-both cap alphabetic; } } .school__enjoy-inner { margin-right: auto; margin-left: auto; padding: 0 40rem; max-width: 100%; width: 1400rem; } @media (max-width: 768px) { .school__enjoy-inner { position: relative; padding: 0; } } @media (max-width: 768px) and (max-width: 768px) { .school__enjoy-inner::after { content: ""; position: absolute; right: 36rem; bottom: -16rem; display: block; width: 51rem; height: 67rem; background-image: url("/jp/komegallery/assets/img/school/deco_enjoy-link-bottom_sp.webp"); background-position: center; background-size: contain; background-repeat: no-repeat; -webkit-transform: translateY(100%); transform: translateY(100%); pointer-events: none; } } .school__enjoy-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 60rem; } @media (max-width: 768px) { .school__enjoy-list { gap: 80rem; } } .school__enjoy-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 768px) { .school__enjoy-item { overflow: hidden; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 48rem; } } .school__enjoy-item:nth-of-type(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media (max-width: 768px) { .school__enjoy-item:nth-of-type(even) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .school__enjoy-item:nth-of-type(even) .school__enjoy-content { margin-right: auto; margin-left: 0; } @media (max-width: 768px) { .school__enjoy-item:nth-of-type(even) .school__enjoy-content { right: auto; left: 3rem; } } @media (max-width: 768px) { .school__enjoy-item::before { content: ""; position: absolute; display: block; background-position: center; background-size: contain; background-repeat: no-repeat; pointer-events: none; } } @media (max-width: 768px) { .school__enjoy-item--study::before { top: -45rem; right: 40rem; width: 40rem; height: 32rem; background-image: url("/jp/komegallery/assets/img/school/deco_enjoy-study_sp.webp"); -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @media (max-width: 768px) { .school__enjoy-item--think::before { top: -28rem; right: 42rem; width: 26rem; height: 26rem; background-image: url("/jp/komegallery/assets/img/school/deco_enjoy-think_sp.webp"); -webkit-transform: translateY(-100%); transform: translateY(-100%); } } @media (max-width: 768px) { .school__enjoy-item--link::before { top: -13rem; left: 9rem; width: 30rem; height: 30rem; background-image: url("/jp/komegallery/assets/img/school/deco_enjoy-link_sp.webp"); -webkit-transform: translateY(-100%); transform: translateY(-100%); } } .school__enjoy-image { position: absolute; overflow: hidden; width: 858rem; border-radius: 16rem; } @media (max-width: 768px) { .school__enjoy-image { position: static; width: 100%; height: 331rem; border-radius: 0; } } .school__enjoy-image img { display: block; width: 100%; height: auto; } @media (max-width: 768px) { .school__enjoy-image img { height: 100%; -o-object-fit: cover; object-fit: cover; } } .school__enjoy-content { position: relative; z-index: 2; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 32rem; margin-left: auto; width: 560rem; height: 560rem; } @media (max-width: 768px) { .school__enjoy-content.pc-only { margin-left: 0; width: 100%; height: auto; } } @media (max-width: 768px) { .school__enjoy-content.pc-none { position: absolute; top: 151rem; right: 3rem; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; width: 212rem; height: 212rem; } } .school__enjoy-content > * { position: relative; z-index: 1; } .school__enjoy-content::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("/jp/komegallery/assets/img/school/bg_enjoy-content.webp"); background-position: center; background-size: 100%; background-repeat: no-repeat; } @media (max-width: 768px) { .school__enjoy-content::before { background-image: url("/jp/komegallery/assets/img/school/bg_enjoy-content_sp.webp"); } } @media (max-width: 768px) { .school__enjoy-content.pc-only::before { display: none; } } .school__enjoy-content::after { content: ""; position: absolute; display: block; background-position: center; background-size: 100%; background-repeat: no-repeat; pointer-events: none; } @media (max-width: 768px) { .school__enjoy-content::after { display: none; } } .school__enjoy-item--study .school__enjoy-content::after { right: 120rem; bottom: 13rem; width: 286rem; height: 531rem; background-image: url("/jp/komegallery/assets/img/school/deco_enjoy-study.webp"); } .school__enjoy-item--think .school__enjoy-content::after { top: 68rem; left: 73rem; width: 62rem; height: 523rem; background-image: url("/jp/komegallery/assets/img/school/deco_enjoy-think.webp"); } .school__enjoy-item--link .school__enjoy-content::after { right: 368rem; bottom: -27rem; width: 68rem; height: 89rem; background-image: url("/jp/komegallery/assets/img/school/deco_enjoy-link.webp"); } .school__enjoy-label { text-align: center; } @media (max-width: 768px) { .pc-only .school__enjoy-label { display: none; } } .school__enjoy-label-ja { margin-bottom: 16rem; color: #373324; letter-spacing: 2rem; font-weight: 700; font-size: 20rem; line-height: 1.5; } @media (max-width: 768px) { .school__enjoy-label-ja { font-size: 16rem; } .pc-only .school__enjoy-label-ja { display: none; } } .school__enjoy-label-en { color: #373324; letter-spacing: 0.05em; font-weight: 700; font-size: 80rem; font-family: "DIN Next LT Pro", sans-serif; line-height: 1.3; } @media (max-width: 768px) { .school__enjoy-label-en { font-size: 48rem; text-box: trim-both cap alphabetic; } .pc-only .school__enjoy-label-en { display: none; } } .school__enjoy-divider { width: 40rem; height: 4rem; background-color: #dc1e37; } @media (max-width: 768px) { .pc-only .school__enjoy-divider { display: none; } } .school__enjoy-description { color: #373324; text-align: center; font-size: 16rem; line-height: 1.8; } @media (max-width: 768px) { .school__enjoy-description { padding: 0 24rem; text-align: left; font-size: 18rem; } } /* ---------- Program ---------- */ .school__program { position: relative; z-index: 2; overflow: hidden; padding: 190rem 0 168rem; background-color: #f9f7f4; } @media (max-width: 768px) { .school__program { padding: 0; background-image: url("/jp/komegallery/assets/img/school/bg_program_sp.webp"); background-position: top 90rem left; background-size: 377rem; background-repeat: no-repeat; } } .school__program > * { position: relative; z-index: 1; } .school__program::before { content: ""; position: absolute; top: 0; left: 50%; z-index: 0; width: 1346rem; height: 1042rem; background-image: url("/jp/komegallery/assets/img/school/bg_program.webp"); background-position: center; background-size: 100%; background-repeat: no-repeat; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 768px) { .school__program::before { display: none; } } .school__program::after { content: ""; position: absolute; right: 0; bottom: 75rem; z-index: 0; width: 201rem; height: 288rem; background-image: url("/jp/komegallery/assets/img/school/bg_voices_sp.webp"); background-position: center; background-size: 100%; background-repeat: no-repeat; -webkit-transform: translateY(100%); transform: translateY(100%); pointer-events: none; } .school__program-inner { margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .school__program-inner { padding-right: 25rem; padding-left: 25rem; } } .school__program-info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16rem; margin-top: 64rem; } @media (max-width: 768px) { .school__program-info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24rem; margin-top: 40rem; } } .school__program-box { position: relative; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 387rem; height: 387rem; background-image: url("/jp/komegallery/assets/img/school/bg_program-box.webp"); background-position: center; background-size: 100%; background-repeat: no-repeat; } @media (max-width: 768px) { .school__program-box { width: 342rem; height: 342rem; } } .school__program-text { color: #373324; text-align: center; font-weight: 700; font-size: 24rem; line-height: 1.8; } @media (max-width: 768px) { .school__program-text { font-size: 20rem; } } .school__program-note { position: absolute; top: 260rem; color: #373324; text-align: center; font-size: 14rem; line-height: 1.8; } @media (max-width: 768px) { .school__program-note { top: 220rem; } } .school__program-notice { margin: 40rem auto 0; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-radius: 8rem; } @media (max-width: 768px) { .school__program-notice { margin-top: 24rem; } } .school__program-notice p { margin-bottom: 0; color: #373324; font-size: 14rem; line-height: 1.8; } .school__program-notice p:first-child { margin-bottom: 8rem; font-weight: 700; } .school__program-notice em { color: inherit !important; font-weight: normal; font-style: normal; } /* ---------- Voices ---------- */ .school__voices { position: relative; padding: 12rem 0 168rem; background-color: #f9f7f4; } @media (max-width: 768px) { .school__voices { padding: 110rem 0 50rem; } .school__voices::before { content: ""; position: absolute; bottom: -75rem; left: 0; z-index: 0; width: 221rem; height: 294rem; background-image: url("/jp/komegallery/assets/img/school/bg_voices-bottom_sp.webp"); background-position: center; background-size: 100%; background-repeat: no-repeat; pointer-events: none; } } .school__voices-inner { position: relative; z-index: 1; margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .school__voices-inner { padding-right: 25rem; padding-left: 25rem; } } .school__voices-inner + .school__voices-inner { padding-top: 168rem; } @media (max-width: 768px) { .school__voices-inner + .school__voices-inner { padding-top: 0; } } .school__voices-inner--teachers { position: relative; z-index: 0; } .school__voices-inner--teachers::before { content: ""; position: absolute; top: 16rem; right: -15rem; z-index: -1; width: 568rem; height: 568rem; background-image: url("/jp/komegallery/assets/img/school/bg_voices-teacher.webp"); background-position: center; background-size: 100%; background-repeat: no-repeat; } @media (max-width: 768px) { .school__voices-inner--teachers::before { display: none; } } .school__voices-inner--teachers::after { content: ""; position: absolute; bottom: -168rem; left: -86rem; width: 190rem; height: 190rem; background-image: url("/jp/komegallery/assets/img/school/bg_voices.webp"); background-position: center; background-size: 100%; -webkit-transform: translateY(66rem); transform: translateY(66rem); } .school__voices-list { display: -ms-grid; display: grid; gap: 20rem; margin-top: 68rem; padding-bottom: 200rem; -ms-grid-columns: 1fr 20rem 1fr 20rem 1fr; grid-template-columns: repeat(3, 1fr); } @media (max-width: 768px) { .school__voices-list { gap: 135rem; margin-top: 40rem; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .school__voices-list--two-column { -ms-grid-columns: (1fr)[2]; grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .school__voices-list--two-column { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .school__voices-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24rem; padding: 48rem 32rem 40rem; border-radius: 8rem; background-color: #fff; } @media (max-width: 768px) { .school__voices-item { gap: 20rem; padding: 48rem 32rem 40rem; } } .school__voices-item::before { content: ""; position: absolute; bottom: 6rem; left: 80rem; display: block; width: 52.5rem; height: 46rem; background-image: url("/jp/komegallery/assets/img/school/arrow_voices-item.webp"); background-position: center; background-size: 100%; background-repeat: no-repeat; -webkit-transform: translateY(100%); transform: translateY(100%); } @media (max-width: 768px) { .school__voices-item::before { bottom: 16rem; left: 104rem; width: 36rem; height: 36rem; } } .school__voices-avatar { position: absolute; top: 100%; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 180rem; } @media (max-width: 768px) { .school__voices-avatar { top: auto; bottom: 40rem; height: 135rem; -webkit-transform: translateY(100%); transform: translateY(100%); } } .school__voices-avatar img { width: auto; height: 100%; } .school__voices-text { color: #373324; font-size: 16rem; line-height: 1.8; } /* ---------- CTA ---------- */ .school__cta { position: relative; padding: 100rem 0 106rem; background-color: #fff; } @media (max-width: 768px) { .school__cta { padding: 80rem 0; } } .school__cta-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-right: auto; margin-left: auto; width: 868rem; } @media (max-width: 768px) { .school__cta-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 40rem; width: 342rem; -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .school__cta-image { overflow: hidden; width: 451rem; border-radius: 8rem; } @media (max-width: 768px) { .school__cta-image { width: 100%; } } .school__cta-image img { display: block; width: 100%; height: auto; } .school__cta-content { 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; } @media (max-width: 768px) { .school__cta-content { -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } } .school__cta-subtitle { color: #373324; letter-spacing: 0.1em; font-weight: 700; font-size: 16rem; line-height: 1.8; text-box: trim-both cap alphabetic; } .school__cta-title { margin-top: 32rem; color: #373324; white-space: nowrap; letter-spacing: 0.04em; font-weight: 700; font-size: 24rem; line-height: 1.7; text-box: trim-both cap alphabetic; } @media (max-width: 768px) { .school__cta-title { margin-top: 24rem; text-align: center; letter-spacing: 0.1em; font-size: 20rem; } } .school__cta-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16rem; margin-top: 32rem; } @media (max-width: 768px) { .school__cta-buttons { margin-top: 40rem; } } .school__cta-buttons .school__button { width: 224rem; white-space: nowrap; font-size: 16rem; } @media (max-width: 768px) { .school__cta-buttons .school__button { width: 100%; } } /* ---------- Access ---------- */ .school__access { position: relative; padding: 168rem 0; background-color: #f9f7f4; } @media (max-width: 768px) { .school__access { padding: 104rem 0; } } .school__access-image { margin-bottom: 104rem; width: 100%; height: auto; } .school__access-image img { display: block; max-height: 683rem; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -o-object-position: center bottom; object-position: center bottom; } .school__access-inner { padding: 40rem; padding-bottom: 0; background-color: #fff; margin-right: auto; margin-left: auto; width: var(--wrap); } @media (max-width: 768px) { .school__access-inner { padding-right: 25rem; padding-left: 25rem; } } .school__access-map, .school__access-photo { width: 100%; } .school__access-map img, .school__access-photo img { display: block; width: 100%; height: auto; } /* ---------- Footer Image ---------- */ .school__footer-image { width: 100%; } .school__footer-image img { display: block; width: 100%; height: auto; } @media (min-width: 769px) { .pc-none { display: none !important; } } @media (max-width: 768px) { .sp-none { display: none !important; } } /*# sourceMappingURL=school-style.css.map */