'1500','height'=>'687']) ?>
庭園に流れる“足湯”。
座ってゆっくり、
またお喋りしながらの歩行などお楽しみください。
Case 2: grid layout does not has top image on mobile
豊富な湯量の天然温泉
露天風呂からももちろん
別府湾や高崎山を一望することができます。
高台に位置しているので、
心地よい風と眺望で心も体も満足頂けます。
大浴場の室内の温泉もたっぷりと堪能下さい。
広々とした浴槽で、ゆっくりお寛ぎいただけます。
col-picture--lg: image 60%
col-picture--md: image 48%
col-picture--md2: image 50%
*/
.c-grid-image-text {
display: grid;
gap: calc(20 / var(--base) * 1em) 7%;
}
@media only screen and (min-width: 768px) {
.c-grid-image-text {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.col-picture--lg {
grid-template-columns: 60% 33%;
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.col-picture--md {
column-gap: 8%;
grid-template-columns: 48% 44%;
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.col-picture--md2 {
column-gap: 8%;
grid-template-columns: 50% 42%;
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.reverse.col-picture--lg {
grid-template-columns: 33% 60%;
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.reverse.col-picture--md {
grid-template-columns: 44% 48%;
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.reverse.col-picture--md2 {
column-gap: 8%;
grid-template-columns: 42% 50%;
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.has-top-title {
grid-template-areas: "image title" "image desc";
}
}
@media only screen and (max-width: 767px) {
.c-grid-image-text.has-top-title {
grid-template-areas: "title" "image" "desc";
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.has-top-title.reverse {
grid-template-areas: "title image" "desc image";
}
}
.c-grid-image-text.has-top-title .c-grid-image-text__title {
align-self: flex-end;
}
.c-grid-image-text.has-top-title .c-grid-image-text__description {
align-self: flex-start;
}
.c-grid-image-text.no-has-top-title {
align-items: center;
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.no-has-top-title {
grid-template-areas: "image desc";
}
}
@media only screen and (max-width: 767px) {
.c-grid-image-text.no-has-top-title {
grid-template-areas: "image" "desc";
}
}
@media only screen and (min-width: 768px) {
.c-grid-image-text.no-has-top-title.reverse {
grid-template-areas: "desc image";
}
}
.c-grid-image-text.no-has-top-title.reverse .c-grid-image-text__description {
margin-inline: auto;
}
.c-grid-image-text__title {
grid-area: title;
}
.c-grid-image-text__picture {
grid-area: image;
align-self: center;
}
.c-grid-image-text__picture img {
width: 100%;
}
.c-grid-image-text__description {
grid-area: desc;
}
@media only screen and (min-width: 1200px) {
.c-grid-image-text .c-grid-image-text__title,
.c-grid-image-text .c-grid-image-text__description {
padding-right: 15%;
padding-left: 0;
}
}
@media print {
.c-grid-image-text .c-grid-image-text__title,
.c-grid-image-text .c-grid-image-text__description {
padding-right: 15%;
padding-left: 0;
}
}
@media only screen and (min-width: 1200px) {
.c-grid-image-text .c-grid-image-text__title.no-padding,
.c-grid-image-text .c-grid-image-text__description.no-padding {
padding-right: 0;
padding-left: 0;
}
}
@media print {
.c-grid-image-text .c-grid-image-text__title.no-padding,
.c-grid-image-text .c-grid-image-text__description.no-padding {
padding-right: 0;
padding-left: 0;
}
}
@media only screen and (min-width: 1200px) {
.c-grid-image-text.reverse .c-grid-image-text__title,
.c-grid-image-text.reverse .c-grid-image-text__description {
padding-left: 15%;
padding-right: 0;
}
}
@media print {
.c-grid-image-text.reverse .c-grid-image-text__title,
.c-grid-image-text.reverse .c-grid-image-text__description {
padding-left: 15%;
padding-right: 0;
}
}
@media only screen and (min-width: 1200px) {
.c-grid-image-text.reverse .c-grid-image-text__title.no-padding,
.c-grid-image-text.reverse .c-grid-image-text__description.no-padding {
padding-right: 0;
padding-left: 0;
}
}
@media print {
.c-grid-image-text.reverse .c-grid-image-text__title.no-padding,
.c-grid-image-text.reverse .c-grid-image-text__description.no-padding {
padding-right: 0;
padding-left: 0;
}
}
/* ===================================================================
components/_slider-gallery.scss
style info : Gallery Carousel Slider Component
=================================================================== */
.c-slider-gallery {
width: 100%;
box-sizing: border-box;
position: relative;
padding-block: calc(40 / var(--base) * 1em);
}
@media only screen and (max-width: 767px) {
.c-slider-gallery {
padding-block: calc(20 / var(--base) * 1em);
}
}
.c-slider-gallery {
overflow: hidden;
}
.c-slider-gallery .splide__track {
overflow: visible;
}
.c-slider-gallery__slide {
transition: opacity 0.5s ease, transform 0.5s ease;
}
.c-slider-gallery__picture {
display: block;
width: 100%;
overflow: hidden;
background: var(--c-gray-light);
}
.c-slider-gallery__image {
width: 100%;
height: auto;
object-fit: cover;
transition: transform 0.5s ease;
}
.c-slider-gallery .splide__pagination {
position: relative;
margin-top: 1.5em;
display: flex;
align-items: center;
justify-content: center;
gap: 1.1em;
list-style: none;
padding: 0;
z-index: 10;
pointer-events: auto;
}
.c-slider-gallery .splide__pagination__page {
position: relative;
width: 4px;
height: 4px;
margin: 0;
border: none;
cursor: pointer;
padding: 0;
}
.c-slider-gallery .splide__pagination__page:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--base-color);
margin: 0;
border: none;
cursor: pointer;
padding: 0;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.c-slider-gallery .splide__pagination__page:before {
content: "";
width: 0;
height: 0.5px;
background: var(--base-color);
position: absolute;
top: 50%;
transform: translateY(-50%);
left: -12px;
z-index: -1;
transition: width 1000ms cubic-bezier(0.25, 1, 0.5, 1);
}
.c-slider-gallery .splide__pagination__page.is-active:after {
background: var(--c-cvr);
transform: scale(1.5);
}
.c-slider-gallery .splide__pagination__page.is-active:before {
width: 15px;
}
.c-slider-gallery .splide__pagination__page:hover:after {
background: var(--c-cvr);
}
.c-slider-gallery .splide__pagination li {
line-height: 0;
}
.c-slider-gallery .splide__pagination li:first-child .splide__pagination__page:before {
display: none;
}
.c-slider-gallery--peek {
padding-block: 0;
padding-right: calc(26 / var(--base) * 1em);
}
@media only screen and (max-width: 767px) {
.c-slider-gallery--peek {
padding-right: 0;
}
}
.c-slider-gallery--peek {
overflow: visible;
}
.c-slider-gallery--peek .splide__track {
overflow: hidden;
}
@media only screen and (min-width: 768px) {
.c-slider-gallery--peek .splide__pagination {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: auto;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
pointer-events: auto;
z-index: 20;
margin: 0;
}
}
@media only screen and (min-width: 768px) {
.c-slider-gallery--peek .splide__pagination__page:before {
width: 0.5px;
height: 0;
left: 50%;
transform: translateX(-50%);
top: -12px;
transition: height 1000ms cubic-bezier(0.25, 1, 0.5, 1);
}
}
@media only screen and (min-width: 768px) {
.c-slider-gallery--peek .splide__pagination__page.is-active:before {
height: 15px;
width: 0.5px;
}
}
.c-slider-gallery--peek.left-dots {
padding-right: unset;
padding-left: calc(26 / var(--base) * 1em);
}
@media only screen and (max-width: 767px) {
.c-slider-gallery--peek.left-dots {
padding-left: 0;
}
}
@media only screen and (min-width: 768px) {
.c-slider-gallery--peek.left-dots .splide__pagination {
right: auto;
left: 0;
}
}
/* ===================================================================
components/_slider-thumb.scss
style info : Main slider + static thumbnail grid
=================================================================== */
.c-slider--with-thumb {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 767px) {
.c-slider--with-thumb {
grid-template-columns: 1fr;
}
}
.c-slider--with-thumb {
gap: 0;
}
.c-slider-thumb-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(5 / var(--base) * 1em);
align-content: start;
max-width: calc(280 / var(--base) * 1em);
margin: auto;
}
.c-slider-thumb-grid.col-4 {
grid-template-columns: repeat(4, 1fr);
}
.c-slider-thumb-grid.col-5 {
max-width: calc(358 / var(--base) * 1em);
grid-template-columns: repeat(5, 1fr);
}
.c-slider-thumb-grid__item {
position: relative;
cursor: pointer;
overflow: hidden;
aspect-ratio: 1/1;
}
.c-slider-thumb-grid__item::after {
content: "";
position: absolute;
inset: 0;
transition: background 0.25s ease;
pointer-events: none;
}
.c-slider-thumb-grid__item:hover::after {
background: rgba(0, 0, 0, 0.5);
}
.c-slider-thumb-grid__item.is-active::after {
background: rgba(0, 0, 0, 0.5);
}
.c-slider-thumb-grid__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.3s ease;
}
#meal {
background-image: url("../images/common/bg_top_page.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
}
.p-section {
padding-block: calc(120 / var(--base) * 1em);
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.p-section {
padding-block: calc(90 / var(--base) * 1em);
}
}
@media only screen and (max-width: 767px) {
.p-section {
padding-block: calc(60 / var(--base) * 1em);
}
}
.p-section--bg-gray {
background: var(--bg-white-1);
padding-block: calc(80 / var(--base) * 1em);
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.p-section--bg-gray {
padding-block: calc(70 / var(--base) * 1em);
}
}
@media only screen and (max-width: 767px) {
.p-section--bg-gray {
padding-block: calc(60 / var(--base) * 1em);
}
}
.p-section.p-intro {
padding-block: 0;
}
.p-section.p-dinner {
padding-top: calc(90 / var(--base) * 1em);
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.p-section.p-dinner {
padding-top: calc(90 / var(--base) * 1em);
}
}
@media only screen and (max-width: 767px) {
.p-section.p-dinner {
padding-top: calc(60 / var(--base) * 1em);
}
}
.p-section.p-dinner {
padding-bottom: 0;
}
.p-section.p-breakfast, .p-section.p-child_breakfast, .p-section.p-menu {
padding-bottom: 0;
}
.p-intro .c-anchor {
margin-block: calc(60 / var(--base) * 1em);
}
@media only screen and (max-width: 767px) {
.p-intro .c-anchor {
margin-block: calc(50 / var(--base) * 1em);
}
}
.p-dinner {
position: relative;
}
.p-dinner:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 200%;
z-index: -1;
background-image: url("../images/common/bg_meal.webp");
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
}
.p-dinner__body {
display: grid;
gap: calc(60 / var(--base) * 1em) 0;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.p-dinner__body {
gap: calc(40 / var(--base) * 1em) 0;
}
}
@media only screen and (max-width: 767px) {
.p-dinner__body {
gap: calc(40 / var(--base) * 1em) 0;
}
}
@media only screen and (min-width: 768px) {
.p-dinner__body {
grid-template-areas: "title image" "info image";
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto auto;
}
}
@media only screen and (max-width: 767px) {
.p-dinner__body {
grid-template-areas: "title" "image" "info";
}
}
.p-dinner__slider {
grid-area: image;
align-self: center;
}
.p-dinner__detail {
grid-area: title;
align-self: flex-end;
display: grid;
grid-template-columns: 1fr;
gap: calc(60 / var(--base) * 1em) 0;
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.p-dinner__detail {
gap: calc(40 / var(--base) * 1em) 0;
}
}
@media only screen and (max-width: 767px) {
.p-dinner__detail {
gap: calc(40 / var(--base) * 1em) 0;
}
}
.p-dinner__detail {
max-width: calc(358 / var(--base) * 1em);
}
.p-dinner__info {
grid-area: info;
max-width: calc(358 / var(--base) * 1em);
align-self: flex-start;
text-align: center;
}
.p-child_breakfast__content {
background: var(--c-white);
box-shadow: 0 4px 4px -4px rgba(12, 12, 13, 0.05);
padding: calc(60 / var(--base) * 1em);
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.p-child_breakfast__content {
padding: calc(40 / var(--base) * 1em);
}
}
@media only screen and (max-width: 767px) {
.p-child_breakfast__content {
padding: calc(20 / var(--base) * 1em);
}
}
.p-child_breakfast__content {
position: relative;
}
.p-child_breakfast__content:before {
content: "";
position: absolute;
inset: 0;
box-shadow: 0 16px 32px -4px rgba(12, 12, 13, 0.1);
z-index: -1;
}
.p-menu {
position: relative;
}
.p-menu:before {
content: "";
width: 100%;
height: 70%;
position: absolute;
left: 0;
right: 0;
top: calc(160 / var(--base) * 1em);
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
.p-menu:before {
top: calc(130 / var(--base) * 1em);
}
}
@media only screen and (max-width: 767px) {
.p-menu:before {
top: calc(100 / var(--base) * 1em);
}
}
.p-menu:before {
z-index: -1;
background-image: url("../images/common/bg_menu.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
}
/*# sourceMappingURL=meal.css.map */
