/* =========================================================
LeTerra global stylesheet (Figma faithful)
Reference nodes: 142-1121 header / 90-266 footer /
2007-430 concept / 2007-437 stay / 2007-438 access /
2007-439 news / 6-1186 front top
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');
:root {
--c-bg: #ffffff;
--c-text: #000000;
--c-muted: #555;
--c-border: #aaaaaa;
--c-overlay-50: rgba(0, 0, 0, 0.5);
--c-overlay-53: rgba(0, 0, 0, 0.53);
--c-overlay-57: rgba(0, 0, 0, 0.57);
--font-en: 'EB Garamond', 'Times New Roman', serif;
--font-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
--container: 1220px;
--container-narrow: 960px;
--header-side: 28px;
--section-gap: 120px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
overflow-x: hidden;
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.7;
color: var(--c-text);
background: var(--c-bg);
-webkit-font-smoothing: antialiased;
}
img,
video {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
transition: opacity .2s;
}
a:hover {
opacity: .7;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: 400;
line-height: 1.4;
}
p {
/* margin: 0 0 1em; */
margin: 0;
}
ul,
ol {
margin: 0;
padding-left: 1.25em;
}
@media (min-width: 641px) {
.sp-only {
display: none !important;
}
}
@media (max-width: 640px) {
.pc-only {
display: none !important;
}
.sp-title-inner {
max-width: 1331px;
margin: 0 auto;
padding: 0 24px;
margin-bottom: 30px;
}
}
.screen-reader-text {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
top: 1rem;
left: 1rem;
width: auto;
height: auto;
background: #fff;
padding: .5rem 1rem;
z-index: 9999;
}
/* ---------- Layout helpers ---------- */
.l-container {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.l-container--narrow {
max-width: var(--container-narrow);
}
.l-section {
padding: var(--section-gap) 0;
}
.l-section-title {
font-family: var(--font-en);
font-size: 30px;
letter-spacing: 0.06em;
text-align: center;
margin-bottom: 48px;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
min-width: 160px;
height: 40px;
border: 1px solid currentColor;
background: transparent;
color: inherit;
font-family: var(--font-jp);
font-size: 15px;
letter-spacing: 0.15em;
cursor: pointer;
}
.button--dark {
color: #000;
border-color: #000;
}
.button--light {
color: #fff;
border-color: #fff;
}
/* =========================================================
HEADER (Figma 142-1121) — overlay, transparent, white
========================================================= */
.site-header {
position: fixed;
top: 25px;
left: 28px;
right: 28px;
height: 45px;
z-index: 100;
color: #fff;
display: flex;
align-items: center;
gap: 40px;
font-family: var(--font-en);
transition: top .25s, left .25s, right .25s, background-color .25s, color .25s, padding .25s, border-color .25s;
}
/* When user scrolls past the hero, pin header to the very top with a light skin */
body.is-scrolled .site-header {
top: 0;
left: 0;
right: 0;
background: #fff;
color: #000;
padding: 14px 28px;
height: auto;
border-bottom: 1px solid #eee;
}
body.is-scrolled .site-header__burger span {
background: #000;
}
body.is-scrolled .site-header__booking {
color: #000;
border-color: #000;
}
.site-header__burger {
width: 71px;
height: 8px;
background: transparent;
border: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
cursor: pointer;
padding: 0;
}
.site-header__burger span {
display: block;
height: 1px;
background: #fff;
}
.site-header__burger span:nth-child(1) {
width: 71px;
}
.site-header__burger span:nth-child(2) {
width: 36px;
}
.site-header--dark .site-header__burger span {
background: #000;
}
.site-header__brand {
font-family: var(--font-en);
font-size: 30px;
line-height: 1;
color: inherit;
white-space: nowrap;
}
.site-header__nav {
margin-left: auto;
display: flex;
align-items: center;
font-family: var(--font-en);
font-size: 18px;
line-height: 1;
}
.site-header__nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 40px;
}
.site-header__nav a {
color: inherit;
white-space: nowrap;
}
.site-header__lang {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--font-en);
font-size: 18px;
line-height: 1;
color: inherit;
white-space: nowrap;
}
/* GTranslate 公式 widget (select.gt_selector) をテーマ風に装飾 */
.site-header__lang .gtranslate_wrapper { display: inline-block; }
.site-header__lang select.gt_selector {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 10px 6px;
border: 0;
color: inherit;
font: inherit;
line-height: 1;
padding: 6px 20px 6px 4px;
margin: 0;
cursor: pointer;
box-shadow: none;
outline: none;
}
.site-header__lang select.gt_selector::-ms-expand { display: none; }
.site-header__lang select.gt_selector:focus { outline: none; box-shadow: none; }
/* 開いた時の option リスト: 端末によって inherit 色が白背景に白文字化するため明示指定 */
.site-header__lang select.gt_selector option,
.site-drawer__lang select.gt_selector option {
color: #000;
background-color: #fff;
}
/* Hide the GTranslate plugin loader offscreen (only used for JS access) */
.leterra-gt-loader {
pointer-events: none;
}
.site-header__booking {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid currentColor;
padding: 8px 12px;
font-family: var(--font-jp);
font-size: 15px;
line-height: 1;
color: inherit;
}
/* Dark variant for lower-contrast pages / scroll state */
.site-header--light {
color: #000;
}
.site-header--light .site-header__burger span {
background: #000;
}
/* When body has .no-hero, pin header to white background for readability */
body.no-hero {
padding-top: 96px;
}
body.no-hero .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 25px 28px;
background: #fff;
color: #000;
border-bottom: 1px solid #eee;
height: auto;
}
body.no-hero .site-header__burger span {
background: #000;
}
body.no-hero .site-header__booking {
color: #000;
border-color: #000;
}
/* ---------- Drawer ---------- */
.site-drawer-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
visibility: hidden;
transition: opacity .3s, visibility .3s;
z-index: 998;
}
.site-drawer {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 380px;
max-width: 82vw;
background: #0c0c0c;
color: #fff;
transform: translateX(-100%);
transition: transform .3s ease-out;
z-index: 999;
display: flex;
flex-direction: column;
padding: 90px 48px 48px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
.site-drawer__close {
position: absolute;
top: 24px;
right: 24px;
width: 32px;
height: 32px;
background: transparent;
border: 0;
color: #fff;
font-size: 28px;
cursor: pointer;
line-height: 1;
}
.site-drawer__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 32px;
font-family: var(--font-en);
font-size: 22px;
}
.site-drawer__list a {
color: #fff;
display: block;
}
.site-drawer__list a:hover {
opacity: .6;
}
.is-drawer-open .site-drawer {
transform: translateX(0);
}
.is-drawer-open .site-drawer-backdrop {
opacity: 1;
visibility: visible;
}
/* ドロワー: PC ではホテル別メニューと区切り線を隠し、共通メニューのみ表示 */
.site-drawer__hotel,
.site-drawer__separator {
display: none;
}
@media (max-width: 767px) {
.site-drawer__hotel {
display: block;
}
.site-drawer__separator {
display: block;
border: 0;
border-top: 1px solid rgba(255, 255, 255, .3);
margin: 32px 0;
}
}
/* ドロワー最下部の言語スイッチャー */
.site-drawer__lang {
margin-top: auto;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, .3);
}
.site-drawer__lang .gtranslate_wrapper { display: inline-block; }
.site-drawer__lang select.gt_selector {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 10px 6px;
border: 0;
color: #fff;
font-family: var(--font-en);
font-size: 22px;
line-height: 1;
padding: 6px 24px 6px 0;
margin: 0;
cursor: pointer;
box-shadow: none;
outline: none;
}
.site-drawer__lang select.gt_selector::-ms-expand { display: none; }
.site-drawer__lang select.gt_selector:focus { outline: none; box-shadow: none; }
.is-drawer-open {
overflow: hidden;
}
/* =========================================================
FRONT HERO (Figma 6-1186 top)
========================================================= */
.front-hero {
position: relative;
width: 100%;
height: 960px;
overflow: hidden;
color: #fff;
}
.front-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.front-hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.19);
z-index: 2;
}
.front-hero__inner {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 40px;
}
.front-hero__logo {
width: 180px;
height: auto;
}
.front-hero__copy {
font-family: var(--font-en);
font-size: 40px;
letter-spacing: 0.04em;
color: #fff;
}
.front-hero__lead {
font-family: var(--font-jp);
font-size: 18px;
color: #fff;
text-align: center;
letter-spacing: 0.07em;
line-height: 1.65;
}
@media (max-width: 767px) {
.front-hero__logo {
width: 90px;
}
}
/* =========================================================
CONCEPT (Figma 2007-430)
========================================================= */
.concept-section {
position: relative;
padding: 120px 0 160px;
}
.concept-section__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.concept-section__heading {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 48px;
}
.concept-section__title {
font-family: var(--font-en);
font-size: 30px;
letter-spacing: 0.06em;
}
.concept-section__rule {
width: 90px;
height: 1px;
background: #000;
}
.concept-section__sub {
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.24em;
margin-bottom: 64px;
}
.concept-section__image {
width: 113px;
height: 388px;
margin: 0 auto 48px;
overflow: hidden;
}
.concept-section__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.concept-section__quote {
font-family: var(--font-jp);
font-size: 18px;
text-align: center;
margin-bottom: 40px;
letter-spacing: 0.08em;
}
.concept-section__quote::before {
content: "\201C";
margin-right: 12px;
font-family: var(--font-en);
}
.concept-section__quote::after {
content: "\201D";
margin-left: 12px;
font-family: var(--font-en);
}
.concept-section__poem {
font-family: var(--font-jp);
font-size: 15px;
line-height: 2.2;
text-align: center;
letter-spacing: 0.02em;
max-width: 720px;
margin: 0 auto;
}
/* =========================================================
STAY (Figma 2007-437)
========================================================= */
.stay-section {
padding: 80px 0 0;
}
.stay-section__title {
font-family: var(--font-en);
font-size: 30px;
letter-spacing: 0.06em;
text-align: center;
margin: 0 0 24px;
}
.stay-section__rule {
width: 1px;
height: 90px;
background: #000;
margin: 32px auto 48px;
}
.stay-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
max-width: 1219px;
margin: 0 auto 120px;
padding: 0 24px;
}
a.stay-card {
color: inherit;
text-decoration: none;
}
a.stay-card:hover {
opacity: 1;
}
a.stay-card:hover .stay-card__title {
opacity: .65;
}
.stay-card {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
transition: transform .3s;
}
a.stay-card:hover {
transform: translateY(-4px);
}
.stay-card__slider {
position: relative;
width: 100%;
align-self: stretch; /* 親 .stay-card { align-items: center } で縮むのを防ぐ */
min-width: 0; /* grid/flex 内での縮小許可（はみ出し防止） */
height: 500px;
overflow: hidden;
}
.stay-card__slider .swiper,
.stay-card__slider .swiper-wrapper {
width: 100%;
height: 100%;
}
.stay-card__slider .swiper-slide {
width: 100%;
height: 100%;
}
.stay-card__slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stay-card__title {
font-family: var(--font-en);
font-size: 22px;
letter-spacing: 0.03em;
}
.stay-card__text {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.56;
text-align: center;
letter-spacing: 0.02em;
}
.stay-card__slider .swiper-pagination-bullet {
background: #fff;
opacity: .7;
}
.stay-card__slider .swiper-pagination-bullet-active {
opacity: 1;
}
.stay-hero {
position: relative;
width: 100%;
height: 864px;
overflow: hidden;
color: #fff;
}
.stay-hero__swiper {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.stay-hero__swiper .swiper-wrapper,
.stay-hero__swiper .swiper-slide {
width: 100%;
height: 100%;
}
.stay-hero__swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stay-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.stay-hero__overlay {
position: absolute;
top: 0;
width: 529px;
height: 100%;
background: var(--c-overlay-50);
z-index: 2;
pointer-events: none;
}
.stay-hero--resort .stay-hero__overlay {
left: 120px;
background: var(--c-overlay-50);
}
.stay-hero--narai .stay-hero__overlay {
right: 120px;
background: var(--c-overlay-57);
}
.stay-hero--hirasawa .stay-hero__overlay {
left: 120px;
background: var(--c-overlay-53);
}
.stay-hero__content {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 385px;
display: flex;
flex-direction: column;
gap: 48px;
z-index: 3;
}
.stay-hero--resort .stay-hero__content {
left: 192px;
}
.stay-hero--narai .stay-hero__content {
right: 192px;
}
.stay-hero--hirasawa .stay-hero__content {
left: 192px;
}
.stay-hero__title {
font-family: var(--font-en);
font-size: 35px;
letter-spacing: 0.03em;
}
.stay-hero__text {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.56;
letter-spacing: 0.02em;
}
.stay-hero__actions {
display: flex;
justify-content: space-between;
align-items: center;
}
.stay-hero__link {
display: inline-flex;
gap: 8px;
align-items: center;
font-family: var(--font-jp);
font-size: 15px;
font-weight: 500;
color: #fff;
}
.stay-hero__link::after {
content: "›";
display: inline-block;
font-family: var(--font-en);
font-size: 16px;
}
/* Swiper pagination bullets serve as dots */
.stay-hero__dots {
position: absolute;
bottom: 56px;
width: 148px;
z-index: 4;
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-start;
}
.stay-hero__dots .swiper-pagination-bullet {
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
opacity: .55;
margin: 0;
cursor: pointer;
}
.stay-hero__dots .swiper-pagination-bullet-active {
opacity: 1;
}
.stay-hero__dots:has(.swiper-pagination-bullet:only-child) {
display: none;
}
.stay-hero--resort .stay-hero__dots {
right: calc(50% - 600px);
left: auto;
}
.stay-hero--narai .stay-hero__dots {
left: calc(50% - 600px);
right: auto;
}
.stay-hero--hirasawa .stay-hero__dots {
right: calc(50% - 600px);
left: auto;
}
/* =========================================================
ACCESS (Figma 2007-438)
========================================================= */
.access-section {
padding: 80px 0 120px;
}
.access-section__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 24px;
}
.access-section__heading {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 20px;
}
.access-section__title {
font-family: var(--font-en);
font-size: 30px;
letter-spacing: 0.06em;
line-height: 1;
}
.access-section__rule {
width: 90px;
height: 1px;
background: #000;
}
.access-section__sub {
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.24em;
margin-bottom: 40px;
}
.access-section__map {
width: 100%;
height: 582px;
position: relative;
overflow: hidden;
background: #eee;
}
.access-section__map iframe,
.access-section__map img {
width: 100%;
height: 100%;
border: 0;
display: block;
object-fit: cover;
}
/* =========================================================
NEWS (Figma 2007-439)
========================================================= */
.news-section {
padding: 120px 0;
}
.news-section__inner {
max-width: 1219px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 56px;
}
.news-section__head {
display: flex;
flex-direction: column;
gap: 40px;
align-items: flex-start;
}
.news-section__title-row {
display: flex;
align-items: center;
gap: 24px;
line-height: 1;
}
.news-section__title {
font-family: var(--font-en);
font-size: 30px;
letter-spacing: 0.06em;
}
.news-section__rule {
width: 90px;
height: 1px;
background: #000;
}
.news-section__sub {
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.05em;
}
.news-section__lead {
font-family: var(--font-jp);
font-size: 15px;
letter-spacing: 0.06em;
align-self: center;
}
.news-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.news-card {
display: flex;
flex-direction: column;
gap: 16px;
}
.news-card__media {
width: 100%;
height: 280px;
overflow: hidden;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.news-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-card__media--fallback {
background: #fff;
border: 1px solid #eee;
}
.news-card__media--fallback img {
width: 140px;
height: auto;
object-fit: contain;
}
.news-card__body {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-end;
}
.news-card__info {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.news-card__meta {
display: flex;
gap: 12px;
align-items: center;
}
.news-card__tag {
border: 1px solid var(--c-border);
padding: 4px 8px;
font-size: 13px;
letter-spacing: 0.02em;
}
.news-card__read {
font-size: 15px;
letter-spacing: 0.01em;
}
.news-card__title {
font-family: var(--font-jp);
font-size: 18px;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.4;
text-align: left;
}
.news-card__excerpt {
font-size: 15px;
line-height: 1.4;
letter-spacing: 0.01em;
width: 100%;
}
.news-card__more {
position: relative;
display: inline-flex;
align-items: center;
padding-right: 32px;
font-size: 15px;
font-weight: 500;
letter-spacing: 0.02em;
}
.news-card__more::before {
content: "";
position: absolute;
right: 0;
top: 50%;
width: 22px;
height: 22px;
border: 1px solid currentColor;
border-radius: 50%;
transform: translateY(-50%);
}
.news-card__more::after {
content: "›";
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-55%);
font-family: var(--font-en);
font-size: 14px;
line-height: 1;
}
.news-section__all {
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
width: 220px;
border: 1px solid #000;
font-family: var(--font-jp);
font-size: 15px;
margin-top: 0;
}
@media (max-width: 640px) {
.news-section {
padding: 60px 0;
}
.news-section__inner {
gap: 20px;
}
.news-section__head {
gap: 20px;
}
}
/* =========================================================
FOOTER (Figma 90-266) — normal flow
========================================================= */
.site-footer {
width: 100%;
background: #fff;
color: #000;
border-top: 1px solid #000;
padding: 80px 0 32px;
}
.site-footer__inner {
max-width: 1220px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 144px auto 1fr;
gap: 64px;
align-items: start;
}
.site-footer__left {
display: flex;
flex-direction: column;
gap: 24px;
}
.site-footer__center {
display: flex;
flex-direction: column;
gap: 24px;
}
.site-footer__logo-area {
width: 144px;
}
.site-footer__logo-area img {
width: 144px;
height: auto;
display: block;
}
.site-footer__brand {
font-family: var(--font-en);
font-size: 30px;
line-height: 1;
color: #000;
margin: 0;
}
.site-footer__tel {
font-family: var(--font-jp);
font-size: 15px;
letter-spacing: 0.01em;
line-height: 1;
margin: 0;
}
.site-footer__addr {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.01em;
margin: 0;
}
.site-footer__addr p {
margin: 0;
}
.site-footer__sns {
display: flex;
gap: 24px;
align-items: center;
margin-top: 8px;
}
.site-footer__sns a {
display: inline-flex;
width: 24px;
height: 24px;
color: #000;
}
.site-footer__sns svg {
width: 100%;
height: 100%;
}
.site-footer__right {
display: flex;
flex-direction: column;
gap: 24px;
}
.site-footer__right-title {
font-family: var(--font-en);
font-size: 16px;
letter-spacing: 0.03em;
margin: 0;
}
.site-footer__cols {
display: grid;
grid-template-columns: repeat(3, minmax(120px, 160px));
gap: 80px;
}
.site-footer__col-title {
font-family: var(--font-en);
font-size: 16px;
letter-spacing: 0.03em;
margin: 0 0 16px;
}
.site-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
font-family: var(--font-en);
font-size: 14px;
letter-spacing: 0.03em;
color: #000;
}
.site-footer__col li::before {
content: "- ";
}
.site-footer__bottom {
max-width: 1220px;
margin: 48px auto 0;
padding: 24px 24px 0;
border-top: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.site-footer__copy {
font-family: 'Roboto', var(--font-jp);
font-size: 14px;
color: #000;
margin: 0;
}
.site-footer__legal {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 40px;
align-items: center;
font-family: 'Zen Kaku Gothic New', var(--font-jp);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.01em;
}
.site-footer__legal li {
display: inline-flex;
align-items: center;
}
.site-footer__sep {
user-select: none;
}
/* =========================================================
Generic page-hero / sub pages
========================================================= */
.page-hero {
position: relative;
width: 100%;
min-height: 400px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.page-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.page-hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 2;
}
.page-hero__title {
position: relative;
z-index: 3;
font-family: var(--font-en);
font-size: 40px;
letter-spacing: 0.04em;
}
.hotel-hero {
position: relative;
width: 100%;
min-height: 600px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hotel-hero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hotel-hero::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.25);
z-index: 2;
}
.hotel-hero__copy {
position: relative;
z-index: 3;
font-family: var(--font-en);
font-size: 40px;
letter-spacing: 0.04em;
}
.concept {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.concept__title {
font-family: var(--font-en);
font-size: 30px;
margin-bottom: 24px;
}
.faq {
max-width: 800px;
margin: 0 auto;
}
.faq__item {
border-bottom: 1px solid #eee;
padding: 24px 0;
}
.faq__q {
font-weight: 500;
cursor: pointer;
display: flex;
justify-content: space-between;
}
.faq__a {
margin-top: 12px;
color: var(--c-muted);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.gallery-grid img {
width: 100%;
height: 320px;
object-fit: cover;
}
.item-list {
display: grid;
gap: 80px;
}
.item-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.item-card:nth-child(even) {
direction: rtl;
}
.item-card:nth-child(even)>* {
direction: ltr;
}
.item-card__media img {
width: 100%;
height: 500px;
object-fit: cover;
}
.item-card__body {
display: flex;
flex-direction: column;
gap: 16px;
}
.item-card__title {
font-family: var(--font-en);
font-size: 35px;
letter-spacing: 0.03em;
}
.item-card__meta {
display: flex;
gap: 24px;
font-size: 15px;
color: var(--c-muted);
}
/* Contact Form 7 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
background: #fff;
font: inherit;
}
.wpcf7 textarea {
min-height: 160px;
}
.wpcf7 {
text-align: left;
}
.wpcf7 p {
margin: 0 0 32px;
text-align: left;
}
.wpcf7 label {
display: block;
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.02em;
text-align: left;
}
.wpcf7 label .wpcf7-form-control-wrap {
display: block;
margin-top: 10px;
}
.wpcf7 .wpcf7-acceptance {
display: block;
}
.wpcf7 p:has(input[type="submit"]) {
margin-top: 48px;
text-align: center;
}
.wpcf7 input[type="submit"] {
background: #000;
color: #fff;
padding: 14px 48px;
border: 0;
cursor: pointer;
letter-spacing: 0.2em;
}
/* CF7 拡張フォーム（姓名 / 必須バッジ / カテゴリ select 等） */
.wpcf7 .cf7-row {
margin: 0 0 32px;
}
.wpcf7 .cf7-label {
display: block;
margin-bottom: 10px;
font-family: var(--font-jp);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
line-height: 1.6;
}
.wpcf7 .cf7-required {
display: inline-block;
margin-left: 8px;
padding: 2px 8px;
background: #c00;
color: #fff;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.05em;
border-radius: 2px;
vertical-align: middle;
}
.wpcf7 .cf7-required--cond {
background: #888;
}
.wpcf7 [data-cf7-conditional]:not(.is-required) .cf7-required--cond {
opacity: .55;
}
.wpcf7 .cf7-name {
display: block;
}
.wpcf7 .cf7-name>p {
display: flex;
gap: 12px;
margin: 0;
}
.wpcf7 .cf7-name br {
display: none;
}
.wpcf7 .cf7-name__field {
flex: 1;
min-width: 0;
display: block;
}
.wpcf7 .cf7-name__field input {
width: 100%;
}
.wpcf7 .cf7-name__field .wpcf7-form-control-wrap {
display: block;
margin-top: 0;
}
.wpcf7 .cf7-row>p {
margin: 0;
}
.wpcf7 .cf7-row p:last-child {
margin-bottom: 0;
}
.wpcf7 .cf7-label+br {
display: none;
}
.wpcf7 select[name="category"] {
width: 100%;
padding: 12px 16px;
border: 1px solid #ddd;
background: #fff;
font: inherit;
}
@media (max-width: 480px) {
.wpcf7 .cf7-name>p {
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 767px) {
.contact-form {
padding: 0 16px;
}
}
.pagination,
.nav-links {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 64px;
}
.pagination a,
.nav-links a,
.nav-links span {
padding: 8px 12px;
border: 1px solid #ddd;
}
.nav-links .current {
background: #000;
color: #fff;
}
/* =========================================================
Responsive
========================================================= */
@media (max-width: 1199px) {
:root {
--section-gap: 80px;
}
.stay-cards {
grid-template-columns: repeat(2, 1fr);
}
.news-cards {
grid-template-columns: repeat(2, 1fr);
}
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
.site-footer__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.site-footer__left {
align-items: center;
text-align: center;
}
.site-footer__center {
grid-column: auto;
}
.site-footer__right {
grid-column: auto;
}
.site-footer__cols {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
@media (max-width: 767px) {
:root {
--section-gap: 56px;
}
.site-header {
gap: 16px;
top: 16px;
left: 16px;
right: 16px;
}
.site-header__nav,
.site-header__lang {
display: none;
}
.site-header__booking {
margin-left: auto;
}
.site-header__brand {
font-size: 22px;
}
.front-hero {
height: 640px;
height: 100vh;
}
.front-hero__copy {
font-size: 32px;
display: none;
}
.front-hero__lead {
display: none;
}
.stay-cards {
grid-template-columns: 1fr;
padding: 0 24px;
}
.news-cards {
grid-template-columns: 1fr;
}
.stay-hero {
height: 520px;
}
.stay-hero__overlay {
width: 85%;
left: 8% !important;
right: auto !important;
}
.stay-hero__content {
width: calc(100% - 16%) !important;
left: 10% !important;
right: auto !important;
}
.stay-hero__dots {
display: none;
}
.concept-section__image {
width: 90px;
height: 300px;
}
.access-section {
padding-bottom: 40px;
}
.access-section__map {
height: 320px;
}
.item-card,
.concept {
grid-template-columns: 1fr;
gap: 24px;
}
.item-card:nth-child(even) {
direction: ltr;
}
.item-card__media img {
height: 280px;
}
.site-footer__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.site-footer__logo-area {
width: 100%;
max-width: 280px;
}
.site-footer__cols {
grid-template-columns: 1fr;
gap: 16px;
}
.site-footer__bottom {
flex-direction: column;
gap: 16px;
align-items: flex-start;
margin-top: 32px;
}
.site-footer__legal {
flex-wrap: wrap;
gap: 12px;
}
}
/* =========================================================
News archive page (/news/ template-news.php)
========================================================= */
.news-hero {
min-height: 415px;
}
.news-hero::before {
background: rgba(0, 0, 0, 0.35);
}
.news-hero .page-hero__title {
font-size: 35px;
letter-spacing: 0.03em;
}
.breadcrumbs {
padding: 16px 24px;
font-family: var(--font-jp);
font-size: 12px;
color: #333;
}
.breadcrumbs a {
color: #333;
text-decoration: none;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
.breadcrumbs .aioseo-breadcrumbs {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.news-intro {
padding: 40px 24px;
text-align: center;
}
.news-intro p {
font-family: var(--font-jp);
font-size: 18px;
letter-spacing: 0.02em;
margin: 0;
line-height: 1.6;
}
.news-pickup {
padding: 40px 24px 80px;
}
.news-pickup__head {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 40px;
}
.news-pickup__title {
font-family: var(--font-en);
font-size: 30px;
letter-spacing: 0.03em;
margin: 0;
font-weight: 400;
}
.news-pickup__rule {
width: 90px;
height: 1px;
background: #000;
}
.news-pickup__body {
display: grid;
grid-template-columns: 441px 1fr;
gap: 80px;
align-items: stretch;
}
.news-pickup__media {
display: block;
width: 441px;
height: 320px;
overflow: hidden;
background: #f5f5f5;
}
.news-pickup__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-pickup__media--fallback {
background: #fff;
border: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.news-pickup__media--fallback img {
width: 200px;
height: auto;
object-fit: contain;
}
.news-pickup__content {
display: flex;
flex-direction: column;
gap: 24px;
min-height: 320px;
}
.news-pickup__meta {
display: flex;
gap: 12px;
align-items: center;
font-family: var(--font-jp);
}
.news-pickup__tag {
border: 1px solid #aaa;
padding: 4px 8px;
font-size: 15px;
line-height: 1;
}
.news-pickup__read {
font-size: 16px;
}
.news-pickup__name {
font-family: var(--font-jp);
font-size: 22px;
font-weight: 500;
letter-spacing: 0.02em;
margin: 0;
line-height: 1.4;
}
.news-pickup__name a {
color: inherit;
text-decoration: none;
}
.news-pickup__excerpt {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.6;
margin: 0;
color: #000;
}
.news-pickup__more {
margin-top: auto;
align-self: flex-end;
font-family: var(--font-jp);
font-size: 15px;
font-weight: 500;
text-decoration: none;
color: #000;
display: inline-flex;
align-items: center;
gap: 8px;
}
.news-pickup__more-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 1px solid #000;
border-radius: 50%;
font-size: 11px;
line-height: 1;
}
.news-archive {
padding: 0 24px 80px;
}
.news-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #ccc;
}
.news-list__item {
border-bottom: 1px solid #ccc;
}
.news-list__link {
display: flex;
align-items: center;
gap: 24px;
padding: 20px 4px;
color: inherit;
text-decoration: none;
transition: background 0.15s ease;
}
.news-list__link:hover {
background: #fafafa;
}
.news-list__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.news-list__meta {
display: flex;
gap: 12px;
align-items: center;
font-family: var(--font-jp);
}
.news-list__tag {
border: 1px solid #aaa;
padding: 4px 8px;
font-size: 12px;
line-height: 1;
}
.news-list__read {
font-size: 14px;
color: #000;
}
.news-list__title {
font-family: var(--font-jp);
font-size: 16px;
font-weight: 500;
letter-spacing: 0.02em;
margin: 0;
line-height: 1.5;
}
.news-list__arrow {
flex: 0 0 auto;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 1;
color: #000;
}
.news-archive .pagination {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 48px;
flex-wrap: wrap;
}
.news-archive .pagination a,
.news-archive .pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid #ddd;
text-decoration: none;
color: #000;
font-family: var(--font-jp);
font-size: 14px;
}
.news-archive .pagination .current {
background: #000;
color: #fff;
border-color: #000;
}
.news-archive .pagination .dots {
border-color: transparent;
}
@media (max-width: 1199px) {
.news-pickup__body {
grid-template-columns: 1fr;
gap: 24px;
}
.news-pickup__media {
width: 100%;
height: auto;
aspect-ratio: 441 / 320;
}
.news-pickup__content {
min-height: 0;
}
}
@media (max-width: 767px) {
.news-hero {
min-height: 280px;
}
.news-hero .page-hero__title {
font-size: 28px;
}
.breadcrumbs {
padding: 12px 16px;
font-size: 11px;
}
.news-intro {
padding: 32px 16px;
}
.news-intro p {
font-size: 15px;
}
.news-pickup {
padding: 32px 16px 56px;
}
.news-pickup__head {
gap: 16px;
margin-bottom: 24px;
}
.news-pickup__title {
font-size: 24px;
}
.news-pickup__rule {
width: 60px;
}
.news-pickup__name {
font-size: 18px;
}
.news-pickup__excerpt {
font-size: 14px;
}
.news-archive {
padding: 0 16px 56px;
}
.news-list__link {
padding: 16px 0;
gap: 12px;
}
.news-list__title {
font-size: 14px;
}
.news-list__tag {
font-size: 11px;
}
.news-list__read {
font-size: 12px;
}
}
/* =========================================================
HOTEL TOP SECTIONS (Figma 152-2325)
========================================================= */
/* ---- Shared heading (EB Garamond + 90px rule) ---- */
.hotel-top-heading {
display: flex;
flex-direction: column;
gap: 20px;
}
.hotel-top-heading__row {
display: flex;
align-items: center;
gap: 24px;
}
.hotel-top-heading__title {
font-family: var(--font-en);
font-size: 30px;
letter-spacing: 0.06em;
line-height: 1;
color: #000;
}
.hotel-top-heading__rule {
width: 90px;
height: 1px;
background: #000;
flex-shrink: 0;
}
.hotel-top-heading__sub {
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.05em;
color: #000;
}
/* ---- Shared actions row (予約 + 詳しくみる) ---- */
.hotel-top-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.hotel-top-actions__btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
width: 160px;
padding: 8px;
border: 1px solid #000;
background: transparent;
color: #000;
font-family: var(--font-jp);
font-size: 15px;
letter-spacing: 0.15em;
text-decoration: none;
}
.hotel-top-actions__btn:hover {
opacity: .75;
}
.hotel-top-actions__link {
display: inline-flex;
gap: 8px;
align-items: center;
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
color: #000;
letter-spacing: 0.02em;
text-decoration: none;
}
.hotel-top-actions__link::after {
content: "";
width: 14px;
height: 14px;
border: 1px solid #000;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background-image: url("data:image/svg+xml;utf8,");
background-size: 10px 10px;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
}
/* ---- FV (2068:369) ---- */
.hotel-top-fv {
position: relative;
width: 100%;
height: 960px;
overflow: hidden;
color: #fff;
}
.hotel-top-fv__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.hotel-top-fv::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.19);
z-index: 2;
}
.hotel-top-fv__inner {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
padding: 0 24px;
text-align: center;
}
.hotel-top-fv__logo {
width: 180px;
height: auto;
display: block;
}
.hotel-top-fv__copy {
font-family: var(--font-en);
font-size: 35px;
letter-spacing: 0.03em;
color: #fff;
margin: 0;
font-weight: 400;
}
.hotel-top-fv__lead {
font-family: var(--font-jp);
font-size: 15px;
line-height: 2.2;
letter-spacing: 0.02em;
color: #fff;
margin: 0;
text-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
}
/* ---- Stay (2068:371) ---- */
.hotel-top-stay {
position: relative;
padding: 120px 0;
}
.hotel-top-stay__inner {
max-width: 1331px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: minmax(0, 1fr) 358px;
align-items: stretch;
position: relative;
}
.hotel-top-stay__inner--nobg {
grid-template-columns: 1fr;
justify-items: center;
}
.hotel-top-stay__media {
position: relative;
height: 864px;
overflow: hidden;
grid-column: 1 / -1;
grid-row: 1;
}
.hotel-top-stay__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hotel-top-stay__swiper.swiper,
.hotel-top-stay__swiper .swiper-wrapper {
width: 100%;
height: 100%;
}
.hotel-top-stay__swiper .swiper-slide {
width: 100%;
height: 100%;
}
.hotel-top-stay__swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hotel-top-stay__dots {
position: absolute;
left: 0;
right: 0;
bottom: 16px;
display: flex;
justify-content: center;
gap: 8px;
z-index: 3;
pointer-events: auto;
}
.hotel-top-stay__dots .swiper-pagination-bullet {
background: #fff;
opacity: .6;
}
.hotel-top-stay__dots .swiper-pagination-bullet-active {
opacity: 1;
}
.hotel-top-stay__card {
grid-column: 2 / 3;
grid-row: 1;
align-self: center;
justify-self: end;
width: 358px;
min-height: 544px;
background: #fff;
border-radius: 2px;
padding: 80px 32px 64px;
display: flex;
flex-direction: column;
gap: 48px;
position: relative;
z-index: 2;
}
.hotel-top-stay__heading {
font-family: var(--font-en);
font-size: 35px;
letter-spacing: 0.03em;
line-height: 1;
color: #000;
margin: 0 0 32px;
font-weight: 400;
}
.hotel-top-stay__desc {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.56;
letter-spacing: 0.02em;
color: #000;
margin: 0;
white-space: pre-line;
}
/* ---- Dine (2068:372) ---- */
.hotel-top-dine {
padding: 80px 0;
}
.hotel-top-dine__inner {
max-width: 1331px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 385px 320px 320px;
gap: 48px;
align-items: center;
justify-content: center;
}
.hotel-top-dine__body {
display: flex;
flex-direction: column;
gap: 48px;
}
.hotel-top-dine__copy {
display: flex;
flex-direction: column;
gap: 32px;
}
.hotel-top-dine__detail-link--sp {
display: none;
}
.hotel-top-dine__desc {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.56;
letter-spacing: 0.02em;
margin: 0;
white-space: pre-line;
}
.hotel-top-dine__img {
width: 320px;
height: 600px;
overflow: hidden;
}
.hotel-top-dine__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---- Facility / Cafe (2068:373) ---- */
.hotel-top-facility {
padding: 80px 0;
}
.hotel-top-facility__inner {
max-width: 1331px;
margin: 0 auto;
padding: 0 24px;
position: relative;
display: grid;
grid-template-columns: 425px 1fr;
gap: 0;
align-items: stretch;
}
.hotel-top-facility__col-left {
display: flex;
flex-direction: column;
gap: 0;
}
.hotel-top-facility__img {
overflow: hidden;
}
.hotel-top-facility__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hotel-top-facility__img--sub {
height: 329px;
}
.hotel-top-facility__img--main {
height: 658px;
}
.hotel-top-facility__card {
position: absolute;
left: 270px;
top: 50%;
transform: translateY(-50%);
width: 385px;
min-height: 500px;
background: #fff;
padding: 48px 32px;
display: flex;
flex-direction: column;
gap: 48px;
justify-content: center;
z-index: 3;
}
/* ---- Experience (2068:374) ---- */
.hotel-top-experience {
padding: 80px 0;
position: relative;
}
.hotel-top-experience__inner {
max-width: 1331px;
margin: 0 auto;
padding: 0 96px;
position: relative;
}
.hotel-top-experience__head {
margin-bottom: 56px;
max-width: 347px;
}
.hotel-top-experience__swiper {
position: relative;
overflow: hidden;
}
.hotel-top-experience__swiper .swiper-slide {
width: 280px;
height: auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.hotel-top-experience__card {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
text-decoration: none;
color: inherit;
}
.hotel-top-experience__card:hover .hotel-top-experience__card-img img {
transform: scale(1.03);
}
.hotel-top-experience__card-img {
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
background: #eee;
position: relative;
}
.hotel-top-experience__card-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
position: absolute;
top: 0;
left: 0;
}
.hotel-top-experience__card-title {
font-family: var(--font-jp);
font-weight: 500;
font-size: 18px;
letter-spacing: 0.02em;
text-align: center;
width: 239.6px;
margin: 0 auto;
align-self: flex-start;
}
.hotel-top-experience__card-desc {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.56;
letter-spacing: 0.02em;
color: #000;
margin: 0;
width: 280px;
}
.hotel-top-experience__actions {
margin-top: 56px;
display: flex;
justify-content: space-between;
align-items: center;
}
.hotel-top-experience__actions .hotel-top-actions__btn {
width: 220px;
}
.hotel-top-experience__nav {
position: absolute;
top: 48%;
width: 20px;
height: 20px;
z-index: 5;
background: transparent;
border: 0;
cursor: pointer;
opacity: .6;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.hotel-top-experience__nav:hover {
opacity: 1;
}
.hotel-top-experience__nav--prev {
left: 20px;
}
.hotel-top-experience__nav--next {
right: 20px;
}
.hotel-top-experience__nav::before {
content: "";
width: 14px;
height: 14px;
border-top: 1.5px solid #000;
border-right: 1.5px solid #000;
display: block;
}
.hotel-top-experience__nav--prev::before {
transform: rotate(-135deg);
margin-left: 4px;
}
.hotel-top-experience__nav--next::before {
transform: rotate(45deg);
margin-right: 4px;
}
.hotel-top-experience__nav.is-hidden {
display: none;
}
/* ---- Gallery (2068:375) ---- */
.hotel-top-gallery {
padding: 80px 0;
position: relative;
overflow-x: hidden;
}
.hotel-top-gallery__inner {
max-width: 1381px;
margin: 0 auto;
padding: 0 92px;
position: relative;
}
.hotel-top-gallery__head {
max-width: 347px;
margin-bottom: 56px;
display: flex;
flex-direction: column;
gap: 40px;
}
.hotel-top-gallery__lead {
font-family: var(--font-jp);
font-size: 15px;
line-height: 2.2;
letter-spacing: 0.02em;
margin: 0;
}
.hotel-top-gallery__swiper.swiper {
overflow: visible;
}
.hotel-top-gallery__swiper .swiper-slide {
width: 280px;
height: 280px;
}
.hotel-top-gallery__swiper .swiper-slide figure {
margin: 0;
width: 100%;
height: 100%;
}
.hotel-top-gallery__swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hotel-top-gallery__nav {
position: absolute;
top: 50%;
width: 35px;
height: 35px;
z-index: 5;
background: transparent;
border: 0;
cursor: pointer;
opacity: .6;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hotel-top-gallery__nav:hover {
opacity: 1;
}
.hotel-top-gallery__nav--prev {
left: 16px;
}
.hotel-top-gallery__nav--next {
right: 16px;
}
.hotel-top-gallery__nav::before {
content: "";
width: 20px;
height: 20px;
border-top: 1.5px solid #000;
border-right: 1.5px solid #000;
display: block;
}
.hotel-top-gallery__nav--prev::before {
transform: rotate(-135deg);
margin-left: 4px;
}
.hotel-top-gallery__nav--next::before {
transform: rotate(45deg);
margin-right: 4px;
}
.hotel-top-gallery__nav.is-hidden {
display: none;
}
/* ---- Contact (2068:376) ---- */
.hotel-top-contact {
padding: 80px 0 0;
}
.hotel-top-contact__inner {
max-width: 1331px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 474px 1fr;
gap: 80px;
align-items: start;
}
.hotel-top-contact__left {
display: flex;
flex-direction: column;
gap: 40px;
}
.hotel-top-contact__title {
font-family: var(--font-en);
font-size: 50px;
letter-spacing: 0.03em;
line-height: 1;
color: #000;
margin: 0;
font-weight: 400;
}
.hotel-top-contact__sub {
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.05em;
margin: 0;
}
.hotel-top-contact__intro {
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.8;
letter-spacing: 0.02em;
margin: 0;
}
.hotel-top-contact__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 220px;
height: 40px;
padding: 8px;
border: 1px solid #000;
background: transparent;
color: #000;
font-family: var(--font-jp);
font-size: 15px;
letter-spacing: 0.05em;
text-decoration: none;
}
.hotel-top-contact__btn:hover {
opacity: .75;
}
.hotel-top-contact__ta {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
background: #f3f3f3;
border-radius: 5px;
padding: 12px 16px;
width: 289px;
text-align: center;
text-decoration: none;
color: #000;
}
.hotel-top-contact__ta:hover {
opacity: .85;
}
.hotel-top-contact__ta-rating {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-jp);
font-weight: 500;
font-size: 16px;
letter-spacing: 0.02em;
}
.hotel-top-contact__ta-dots {
display: inline-flex;
gap: 2px;
}
.hotel-top-contact__ta-dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #00a680;
display: inline-block;
}
.hotel-top-contact__ta-logo {
height: 15px;
width: auto;
}
.hotel-top-contact__ta-caption {
font-family: var(--font-jp);
font-size: 12px;
line-height: 1.4;
margin: 0;
}
.hotel-top-contact__right {
display: flex;
flex-direction: column;
gap: 0;
}
.hotel-top-contact__row {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 48px;
padding: 20px 0;
border-bottom: 1px solid #000;
}
.hotel-top-contact__row:first-child {
border-top: 1px solid transparent;
}
.hotel-top-contact__row-label {
display: inline-flex;
align-items: center;
gap: 16px;
font-family: var(--font-jp);
font-weight: 400;
font-size: 16px;
letter-spacing: 0.03em;
min-width: 110px;
color: #000;
}
.hotel-top-contact__row-value {
font-family: var(--font-jp);
font-weight: 400;
font-size: 16px;
letter-spacing: 0.03em;
color: #000;
}
.hotel-top-contact__row-value a {
color: inherit;
text-decoration: none;
}
.hotel-top-contact__row-icon {
width: 25px;
height: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hotel-top-contact__row-icon svg {
width: 100%;
height: 100%;
color: #000;
}
.hotel-top-contact__map {
width: 100%;
height: 480px;
overflow: hidden;
margin-top: 80px;
}
.hotel-top-contact__map iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.hotel-top-contact__map img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---- FAQ (2069:848) ---- */
.hotel-top-faq {
padding: 112px 64px;
background: #fff;
}
.hotel-top-faq__inner {
max-width: 1440px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 80px;
align-items: center;
}
.hotel-top-faq__head {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
max-width: 768px;
text-align: center;
}
.hotel-top-faq__title {
font-family: 'Roboto', var(--font-jp);
font-weight: 700;
font-size: 48px;
line-height: 1.2;
color: #000;
margin: 0;
}
.hotel-top-faq__sub {
font-family: var(--font-jp);
font-size: 18px;
line-height: 1.5;
color: #000;
margin: 0;
}
.hotel-top-faq__body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
width: 100%;
}
.hotel-top-faq__column {
display: flex;
flex-direction: column;
border-bottom: 1px solid #000;
}
.hotel-top-faq__item {
border-top: 1px solid #000;
}
.hotel-top-faq__q {
display: flex;
align-items: center;
gap: 24px;
width: 100%;
padding: 20px 0;
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
font-size: 18px;
line-height: 1.5;
font-family: var(--font-jp);
color: #000;
}
.hotel-top-faq__q-text {
flex: 1;
}
.hotel-top-faq__q-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .25s;
}
.hotel-top-faq__q-icon::before {
content: "";
width: 10px;
height: 10px;
border-right: 1.5px solid #000;
border-bottom: 1.5px solid #000;
transform: rotate(45deg);
margin-top: -4px;
}
.hotel-top-faq__item.is-open .hotel-top-faq__q-icon {
transform: rotate(180deg);
}
.hotel-top-faq__a {
padding-bottom: 24px;
font-family: var(--font-jp);
font-size: 16px;
line-height: 1.5;
color: #000;
display: none;
}
.hotel-top-faq__a p {
margin: 0 0 .5em;
}
.hotel-top-faq__a p:last-child {
margin-bottom: 0;
}
.hotel-top-faq__item.is-open .hotel-top-faq__a {
display: block;
}
/* ---- HOTEL TOP responsive ---- */
@media (max-width: 1199px) {
.hotel-top-fv {
height: 720px;
}
.hotel-top-fv__copy {
font-size: 30px;
}
.hotel-top-stay {
padding: 80px 0;
}
.hotel-top-stay__inner {
grid-template-columns: 1fr;
}
.hotel-top-stay__media {
height: 600px;
grid-column: 1;
}
.hotel-top-stay__card {
grid-column: 1;
grid-row: 2;
justify-self: stretch;
width: 100%;
min-height: 0;
padding: 48px 32px;
}
.hotel-top-dine__inner {
grid-template-columns: 1fr 1fr;
gap: 32px 16px;
}
.hotel-top-dine__img {
width: 100%;
height: 280px;
}
.hotel-top-dine__body {
order: -1;
grid-column: 1 / -1;
gap: 0;
}
.hotel-top-dine__detail-link--pc {
display: none;
}
.hotel-top-dine__detail-link--sp {
display: inline-flex;
grid-column: 1 / -1;
justify-self: center;
margin-top: 8px;
}
.hotel-top-facility__inner {
grid-template-columns: 160px 1fr;
gap: 8px;
padding: 0 16px;
}
.hotel-top-facility__col-left {
gap: 8px;
}
.hotel-top-facility__img--sub {
height: 140px;
}
.hotel-top-facility__img--main {
height: 288px;
}
.hotel-top-facility__card {
grid-column: 1 / -1;
position: static;
transform: none;
width: 100%;
padding: 32px 20px;
min-height: 0;
margin: 24px 0 0;
}
.hotel-top-experience__inner {
padding: 0 60px;
}
.hotel-top-gallery__inner {
padding: 0 60px;
}
.hotel-top-contact__inner {
grid-template-columns: 1fr;
gap: 56px;
padding: 0 24px;
}
.hotel-top-contact__map {
height: 360px;
margin-top: 56px;
}
.hotel-top-faq {
padding: 80px 32px;
}
.hotel-top-faq__body {
grid-template-columns: 1fr;
gap: 0;
}
.hotel-top-faq__column {
border-bottom: 0;
}
.hotel-top-faq__column:last-child {
border-bottom: 1px solid #000;
}
}
@media (max-width: 767px) {
.hotel-top-fv {
height: 560px;
height: 100vh;
}
.hotel-top-fv__copy {
font-size: 26px;
display: none;
}
.hotel-top-fv__lead {
font-size: 14px;
line-height: 2;
display: none;
}
.hotel-top-fv__logo {
width: 90px;
}
.hotel-top-stay__media {
height: 380px;
}
.hotel-top-stay__card {
padding: 32px 20px;
}
.hotel-top-stay__heading {
font-size: 28px;
}
.hotel-top-dine__img {
height: 200px;
}
.hotel-top-dine__inner {
gap: 24px 12px;
}
.hotel-top-facility__inner {
grid-template-columns: 120px 1fr;
}
.hotel-top-facility__img--sub {
height: 110px;
}
.hotel-top-facility__img--main {
height: 228px;
}
.hotel-top-facility__card {
padding: 0px 18px;
gap: 20px;
margin: 0;
}
.hotel-top-experience__inner {
padding: 0 40px;
}
.hotel-top-experience__actions {
flex-direction: column;
gap: 24px;
align-items: stretch;
}
.hotel-top-experience__actions .hotel-top-actions__btn {
width: 100%;
}
.hotel-top-gallery__inner {
padding: 0 40px;
}
.hotel-top-contact__title {
font-size: 40px;
margin-bottom: 20px;
}
.hotel-top-contact__row {
flex-wrap: wrap;
gap: 12px;
padding: 16px 0;
}
.hotel-top-contact__row-label {
min-width: 0;
}
.hotel-top-contact__map {
height: 280px;
margin-top: 40px;
}
.hotel-top-faq {
padding: 64px 16px;
}
.hotel-top-faq__title {
font-size: 36px;
}
.hotel-top-faq__sub {
font-size: 15px;
}
.hotel-top-faq__q {
font-size: 16px;
}
.hotel-top-actions__btn {
width: 140px;
font-size: 14px;
letter-spacing: 0.08em;
}
}
/* =========================================================
Page FV — Stay / Dine / Facility / Cafe 共通 (Figma 4008:472 他)
========================================================= */
.page-fv {
position: relative;
width: 100%;
height: 960px;
overflow: hidden;
color: #fff;
}
.page-fv__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.page-fv::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.19);
z-index: 2;
}
.page-fv__inner {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 215px;
}
.page-fv__title {
font-family: var(--font-en);
font-weight: 400;
font-size: 35px;
letter-spacing: 0.03em;
line-height: 1;
color: #fff;
margin: 0;
}
.page-fv__rule {
display: block;
width: 1px;
height: 100px;
background: #fff;
margin-top: 24px;
}
.page-fv__vlogo {
display: block;
width: auto;
height: 300px;
margin-top: 45px;
object-fit: contain;
filter: drop-shadow(0 0 4px rgba(0, 0, 0, .6));
}
/* Page intro — Stay / Dine / Facility / Cafe 共通 */
.page-intro {
max-width: 720px;
margin: 0 auto;
padding: 80px 24px;
text-align: center;
font-family: var(--font-jp);
font-size: 15px;
line-height: 1.8;
letter-spacing: 0.02em;
}
.page-intro p {
margin: 0;
}
@media (max-width: 640px) {
.page-fv {
height: 620px;
}
.page-fv__inner {
padding-top: 140px;
}
.page-fv__rule {
height: 64px;
margin-top: 16px;
}
.page-fv__vlogo {
height: 200px;
margin-top: 32px;
}
}
/* =========================================================
Stay page — Rooms (Figma 94:493)
========================================================= */
.stay-rooms {
max-width: 1220px;
margin: 0 auto 120px;
padding: 80px 24px 0;
display: flex;
flex-direction: column;
gap: 128px;
}
.stay-room {
display: grid;
grid-template-columns: 400px 1fr;
grid-template-areas:
'head media'
'details media';
column-gap: 80px;
row-gap: 48px;
align-items: start;
}
.stay-room--reverse {
grid-template-columns: 1fr 400px;
grid-template-areas:
'media head'
'media details';
}
.stay-room__head {
grid-area: head;
}
.stay-room__media {
grid-area: media;
}
.stay-room__details {
grid-area: details;
display: flex;
flex-direction: column;
width: 400px;
}
.stay-room--reverse .stay-room__details {
margin-left: auto;
}
.stay-room__head {
display: flex;
flex-direction: column;
gap: 12px;
}
.stay-room__name {
font-family: var(--font-en);
font-weight: 400;
font-size: 26px;
letter-spacing: 0.01em;
line-height: 1;
margin: 0;
color: #000;
}
.stay-room__rule {
display: block;
width: 100%;
height: 3px;
background: transparent;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.stay-room__specs {
display: flex;
flex-direction: column;
margin: 0;
}
.stay-room__spec {
display: grid;
grid-template-columns: 115px 1fr;
gap: 0;
padding: 20px 0;
border-bottom: 1px solid #000;
align-items: start;
}
.stay-room__spec dt {
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.stay-room__spec dd {
font-family: var(--font-jp);
font-weight: 400;
font-size: 15px;
line-height: 1.44;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.stay-room__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 46px;
margin-top: 48px;
padding: 8px;
background: #fff;
border: 1px solid #000;
color: #000;
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.15em;
text-decoration: none;
text-align: center;
}
.stay-room__btn:hover {
opacity: .75;
}
/* Media column — slider + fraction nav */
.stay-room__media {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
}
.stay-room__slider {
width: 100%;
max-width: 740px;
height: 600px;
overflow: hidden;
}
.stay-room__slider .swiper-wrapper {
height: 100%;
}
.stay-room__slider .swiper-slide {
width: 100%;
height: 100%;
}
.stay-room__slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.stay-room__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 8px;
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.02em;
color: #000;
}
.stay-room__nav-btn {
width: 22.5px;
height: 16px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: .7;
color: #000;
}
.stay-room__nav-btn:hover {
opacity: 1;
}
.stay-room__nav-btn svg {
width: 22.5px;
height: 8px;
display: block;
}
.stay-room__fraction {
font-variant-numeric: tabular-nums;
min-width: 48px;
text-align: center;
}
@media (max-width: 1023px) {
.stay-room,
.stay-room--reverse {
grid-template-columns: 1fr;
grid-template-areas:
'head'
'media'
'details';
column-gap: 0;
row-gap: 24px;
}
.stay-room__details,
.stay-room--reverse .stay-room__details {
width: 100%;
margin-left: 0;
}
.stay-room__slider {
height: 440px;
}
}
@media (max-width: 640px) {
.stay-rooms {
gap: 64px;
padding: 40px 24px 0;
}
.stay-room__slider {
height: 320px;
}
.stay-room__head {
margin-bottom: 32px;
}
.stay-room__spec {
grid-template-columns: 90px 1fr;
}
}
/* =========================================================
Dine page — Items (Figma 2077:580) — FV / intro は .page-fv / .page-intro を共用
========================================================= */
/* フル幅セクション: max-width なし、水平 padding なし — 画像を viewport 端に flush させるため */
.dine-items {
margin: 0 0 120px;
padding: 80px 0 0;
display: flex;
flex-direction: column;
gap: 96px;
}
/* 1 行 = flex 2カラム。main 画像は viewport 端に flush、opposite side にガター */
.dine-item {
display: flex;
align-items: flex-start;
width: 100%;
gap: clamp(32px, 15vw, 212px);
padding-right: clamp(24px, 8vw, 110px);
padding-left: 0;
}
.dine-item--reverse {
flex-direction: row-reverse;
padding-right: 0;
padding-left: clamp(24px, 8vw, 110px);
}
/* Media — 画像は viewport に応じて可変、上限 900px。aspect-ratio で main の縦横比に親高さを固定 */
.dine-item__media {
flex: 1 1 0;
min-width: 0;
max-width: 900px;
position: relative;
aspect-ratio: 613 / 450;
/* 既定 (1枚時): main と同じ比 → main が親全高を占有 */
}
/* PC: 奇数番目は media を右寄せ / 偶数番目は左寄せ (max-width に達した後の余剰スペースを opposite-side に) */
@media (min-width: 1200px) {
.dine-item:nth-child(odd) .dine-item__media {
margin-left: auto;
}
.dine-item:nth-child(even) .dine-item__media {
margin-right: auto;
}
}
.dine-item__media-main {
display: block;
width: 100%;
aspect-ratio: 613 / 450;
height: auto;
object-fit: cover;
}
/* Sub 画像 — multi 時の親 aspect (613/762) 基準で配置 */
.dine-item__media-sub {
position: absolute;
top: 52.76%;
/* 402/762 (multi container 基準) */
left: 50%;
/* 309/613 (width 基準) */
width: 65.74%;
/* 403/613 */
aspect-ratio: 403 / 360;
height: auto;
object-fit: cover;
box-shadow: 0 0 12px rgba(0, 0, 0, .08);
}
/* 2 枚時: 親 aspect を拡張し、sub 下方突き出し分まで親要素の高さに含める */
.dine-item--multi .dine-item__media {
aspect-ratio: 613 / 762;
}
/* 1 枚のみ — main を大きく表示（上限 712px）、親も 712/520 比に */
.dine-item--single .dine-item__media {
max-width: 712px;
aspect-ratio: 712 / 520;
}
.dine-item--single .dine-item__media-main {
aspect-ratio: 712 / 520;
}
/* Reverse 行: sub を左右ミラー */
.dine-item--reverse .dine-item__media-sub {
left: auto;
right: 50%;
}
/* Info column — 固定 504px */
.dine-item__info {
flex: 0 0 504px;
max-width: 504px;
display: flex;
flex-direction: column;
gap: 64px;
}
.dine-item__desc {
font-family: var(--font-jp);
font-size: 15px;
line-height: 2.2;
letter-spacing: 0.02em;
margin: 0;
max-width: 500px;
}
/* Spec table — 上に2重線 / 行間は1px */
.dine-item__specs {
display: flex;
flex-direction: column;
margin: 0;
border-top: 1px solid #000;
position: relative;
}
.dine-item__specs::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -3px;
height: 1px;
background: #000;
}
.dine-item__spec {
display: grid;
grid-template-columns: 97px 1fr;
gap: 0;
padding: 20px 0;
border-bottom: 1px solid #000;
align-items: start;
}
.dine-item__spec dt {
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.dine-item__spec dd {
font-family: var(--font-jp);
font-weight: 400;
font-size: 15px;
line-height: 1.44;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.dine-item__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 46px;
padding: 8px;
background: #fff;
border: 1px solid #000;
color: #000;
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.15em;
text-decoration: none;
text-align: center;
align-self: flex-start;
}
.dine-item__btn:hover {
opacity: .75;
}
@media (max-width: 1199px) {
.dine-item,
.dine-item--reverse {
flex-direction: column;
gap: 24px;
padding-left: 0;
padding-right: 0;
}
.dine-item__media {
flex: initial;
max-width: 85%;
width: 100%;
margin: 0 auto;
}
.dine-item--multi .dine-item__media {
aspect-ratio: inherit;
padding-bottom: 0;
}
.dine-item__media-main {
width: 100%;
max-width: none;
aspect-ratio: 613 / 450;
}
.dine-item__media-sub {
position: static;
width: 70%;
max-width: 403px;
height: auto;
aspect-ratio: 403 / 360;
margin: 16px 0 0 auto;
display: block;
}
.dine-item--reverse .dine-item__media-sub {
margin: 16px auto 0 0;
right: auto;
}
.dine-item--single .dine-item__media-main {
aspect-ratio: 712 / 520;
}
.dine-item__info {
flex: initial;
width: calc(100% - 48px);
max-width: 613px;
margin: 0 auto;
padding: 0 16px;
}
}
@media (max-width: 640px) {
.dine-items {
gap: 48px;
padding: 40px 0 0;
}
.dine-item__media {
max-width: 92%;
}
.dine-item__media-sub {
margin-top: -10%;
width: 75%;
}
.dine-item__info {
gap: 32px;
padding: 0 16px;
}
.dine-item__spec {
grid-template-columns: 80px 1fr;
padding: 14px 0;
}
}
/* =========================================================
Facility / Cafe page — Blocks (Figma 2082:606)
========================================================= */
.facility-blocks {
max-width: 1440px;
margin: 0 auto 120px;
padding: 80px 0 0;
display: flex;
flex-direction: column;
gap: 160px;
}
.facility-block {
position: relative;
display: flex;
flex-direction: column;
}
/* 上段: 大画像 + 白カード (画像にオーバーラップ) + フラクションナビ */
.facility-block__upper {
position: relative;
min-height: 580px;
}
.facility-block__main-media {
position: relative;
width: min(1230px, calc(100% - 210px));
height: 580px;
overflow: visible;
}
.facility-block:nth-child(odd) .facility-block__main-media {
margin-left: auto;
margin-right: 0;
}
.facility-block:nth-child(even) .facility-block__main-media {
margin-left: 0;
margin-right: auto;
}
.facility-block__slider {
width: 100%;
height: 580px;
overflow: hidden;
}
.facility-block__slider .swiper-wrapper {
height: 100%;
}
.facility-block__slider .swiper-slide {
width: 100%;
height: 100%;
}
.facility-block__slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.facility-block__static-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.facility-block__nav {
position: absolute;
top: calc(100% + 14px);
display: flex;
align-items: center;
gap: 20px;
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.02em;
color: #000;
}
.facility-block:nth-child(odd) .facility-block__nav {
right: 24px;
}
.facility-block:nth-child(even) .facility-block__nav {
left: 24px;
}
.facility-block__nav-btn {
width: 22.5px;
height: 16px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: .7;
color: #000;
}
.facility-block__nav-btn:hover {
opacity: 1;
}
.facility-block__nav-btn svg {
width: 22.5px;
height: 8px;
display: block;
}
.facility-block__fraction {
font-variant-numeric: tabular-nums;
min-width: 48px;
text-align: center;
}
.facility-block__card {
position: absolute;
top: calc(580px - 451px + 129px);
width: 478px;
min-height: 451px;
background: #fff;
padding: 64px 32px;
display: flex;
flex-direction: column;
gap: 40px;
z-index: 2;
box-sizing: border-box;
}
.facility-block:nth-child(odd) .facility-block__card {
left: 109px;
}
.facility-block:nth-child(even) .facility-block__card {
right: 109px;
}
.facility-block__head {
display: flex;
flex-direction: column;
gap: 27px;
align-items: flex-start;
margin: 0;
}
.facility-block__title-row {
display: flex;
gap: 24px;
align-items: center;
}
.facility-block__name {
font-family: var(--font-en);
font-weight: 400;
font-size: 30px;
line-height: 1;
letter-spacing: 0.03em;
color: #000;
}
.facility-block__rule {
display: block;
width: 90px;
height: 1px;
background: #000;
}
.facility-block__name-jp {
font-family: var(--font-jp);
font-weight: 400;
font-size: 16px;
line-height: 1;
letter-spacing: 0.24em;
color: #000;
margin: 0;
}
.facility-block__desc {
font-family: var(--font-jp);
font-size: 15px;
line-height: 2.2;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.facility-block__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 46px;
padding: 8px;
background: #fff;
border: 1px solid #000;
color: #000;
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.15em;
text-decoration: none;
text-align: center;
align-self: flex-start;
transition: opacity .2s;
}
.facility-block__btn:hover {
opacity: .75;
}
/* 下段: 画像クラスター + specs */
.facility-block__lower {
margin-top: 120px;
padding: 0 109px;
display: flex;
gap: 100px;
align-items: flex-start;
}
.facility-block:nth-child(odd) .facility-block__lower {
flex-direction: row;
}
.facility-block:nth-child(even) .facility-block__lower {
flex-direction: row-reverse;
}
.facility-block__cluster {
position: relative;
flex: 0 0 auto;
width: 728px;
aspect-ratio: 728 / 674;
}
.facility-block__cluster-main {
position: absolute;
left: 0;
top: 0;
width: 473px;
height: 419px;
object-fit: cover;
display: block;
}
.facility-block__cluster-sub {
position: absolute;
right: 0;
bottom: 0;
width: 365px;
height: 419px;
object-fit: cover;
display: block;
}
/* Reverse ブロック: クラスター内の画像も左右反転 (main 右 / sub 左) */
.facility-block--reverse .facility-block__cluster-main {
left: auto;
right: 0;
}
.facility-block--reverse .facility-block__cluster-sub {
right: auto;
left: 0;
}
/* 1 枚のみの場合: main のみ、cluster を 473px に縮小 */
.facility-block__lower--single .facility-block__cluster {
width: 473px;
aspect-ratio: 473 / 419;
}
.facility-block__lower--single .facility-block__cluster-main {
width: 100%;
}
/* 画像なしの場合: specs のみ中央寄せ */
.facility-block__lower--noimg {
justify-content: center;
}
/* Specs — Dine/Stay と同じ 2重線 + 行間単線 */
.facility-block__specs {
flex: 0 0 400px;
max-width: 400px;
display: flex;
flex-direction: column;
margin: 0;
border-top: 1px solid #000;
position: relative;
}
.facility-block__specs::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -3px;
height: 1px;
background: #000;
}
.facility-block__spec {
display: grid;
grid-template-columns: 115px 1fr;
gap: 0;
padding: 20px 0;
border-bottom: 1px solid #000;
align-items: start;
}
.facility-block__spec dt {
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.facility-block__spec dd {
font-family: var(--font-jp);
font-weight: 400;
font-size: 15px;
line-height: 1.44;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
/* Responsive — 1199px 以下で縦積み */
@media (max-width: 1199px) {
.facility-blocks {
gap: 96px;
padding: 40px 0 0;
margin-bottom: 80px;
}
.facility-block__upper {
min-height: 0;
}
.facility-block__main-media,
.facility-block:nth-child(odd) .facility-block__main-media,
.facility-block:nth-child(even) .facility-block__main-media {
width: 100%;
max-width: 92%;
margin: 0 auto;
height: auto;
aspect-ratio: 1230 / 580;
}
.facility-block__slider {
width: 100%;
height: 100%;
}
.facility-block__nav,
.facility-block:nth-child(odd) .facility-block__nav,
.facility-block:nth-child(even) .facility-block__nav {
position: static;
left: auto;
right: auto;
justify-content: center;
margin-top: 8px;
}
.facility-block__card,
.facility-block:nth-child(odd) .facility-block__card,
.facility-block:nth-child(even) .facility-block__card {
position: static;
width: calc(100% - 48px);
max-width: 613px;
min-height: 0;
margin: 24px auto 0;
padding: 32px 24px;
left: auto;
right: auto;
}
.facility-block__lower,
.facility-block:nth-child(odd) .facility-block__lower,
.facility-block:nth-child(even) .facility-block__lower {
flex-direction: column;
gap: 32px;
margin-top: 48px;
padding: 0 24px;
align-items: center;
}
.facility-block__cluster,
.facility-block__lower--single .facility-block__cluster {
width: 100%;
max-width: 613px;
aspect-ratio: 728 / 674;
}
.facility-block__specs {
flex: initial;
max-width: 100%;
width: 100%;
}
}
@media (max-width: 640px) {
.facility-block__spec {
grid-template-columns: 90px 1fr;
padding: 14px 0;
}
.facility-block__name {
font-size: 26px;
}
.facility-block__card {
padding: 24px 20px;
}
}
/* =========================================================
Experience page — 一覧スライダー (Figma 2087:615)
========================================================= */
.experience-list {
position: relative;
margin: 80px 0 96px;
padding: 0 0 64px;
overflow: hidden;
}
.experience-list__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 434px;
overflow: hidden;
z-index: 0;
}
.experience-list__bg img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.experience-list__bg-overlay {
position: absolute;
inset: 0;
background: rgba(93, 97, 85, .74);
mix-blend-mode: screen;
}
.experience-list__swiper {
position: relative;
z-index: 1;
margin: 322px 0 0 114px;
padding-right: 114px;
overflow: visible;
}
.experience-list__swiper .swiper-wrapper {
align-items: flex-start;
}
.experience-list__card {
width: 200px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 24px;
align-items: stretch;
text-decoration: none;
color: #000;
}
.experience-list__thumb {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 50%;
background: #e3e3e3;
}
.experience-list__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.experience-list__name {
font-family: var(--font-jp);
font-weight: 700;
font-size: 17px;
line-height: 1;
letter-spacing: 0.02em;
text-align: center;
margin: 0;
color: #000;
}
.experience-list__summary {
font-family: var(--font-jp);
font-weight: 400;
font-size: 14px;
line-height: 1.7;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.experience-list__pagination {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
gap: 12px;
margin-top: 40px;
}
.experience-list__bullet {
width: 8px;
height: 8px;
padding: 0;
background: #000;
opacity: .2;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: opacity .2s;
}
.experience-list__bullet:hover {
opacity: .5;
}
.experience-list__bullet.is-active {
opacity: 1;
}
@media (max-width: 1199px) {
.experience-list__swiper {
margin-left: 48px;
padding-right: 48px;
}
}
@media (max-width: 1023px) {
.experience-list__bg {
height: 260px;
}
.experience-list__swiper {
margin: 180px 0 0 24px;
padding-right: 24px;
}
.experience-list__card {
width: 170px;
}
}
@media (max-width: 1023px) {
.experience-list {
margin-top: 56px;
}
}
@media (max-width: 640px) {
.experience-list {
margin-top: 40px;
}
.experience-list__bg {
height: 200px;
}
.experience-list__swiper {
margin: 140px 0 0 16px;
padding-right: 16px;
}
.experience-list__card {
width: 150px;
gap: 16px;
}
.experience-list__name {
font-size: 15px;
}
.experience-list__summary {
font-size: 13px;
}
}
/* =========================================================
Experience page — 詳細ブロック (Figma 2088:616) — Facility upper 相当 + 料金/注意事項
========================================================= */
.experience-blocks {
max-width: 1440px;
margin: 0 auto 120px;
padding: 0 0 0;
display: flex;
flex-direction: column;
gap: 160px;
}
.experience-block {
position: relative;
display: flex;
flex-direction: column;
scroll-margin-top: 120px;
}
/* 上段 — カードは通常フロー、画像は absolute で画面端に flush */
.experience-block__upper {
position: relative;
padding-top: 258px;
min-height: 580px;
}
/* 258px = 580 - 451 + 129 (元カード top 相当) */
.experience-block__main-media {
position: absolute;
top: 0;
width: min(1230px, calc(100% - 210px));
height: 580px;
overflow: visible;
z-index: 1;
}
.experience-block:nth-child(odd) .experience-block__main-media {
right: 0;
left: auto;
}
.experience-block:nth-child(even) .experience-block__main-media {
left: 0;
right: auto;
}
.experience-block__slider {
width: 100%;
height: 580px;
overflow: hidden;
}
.experience-block__slider .swiper-wrapper {
height: 100%;
}
.experience-block__slider .swiper-slide {
width: 100%;
height: 100%;
}
.experience-block__slider .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.experience-block__static-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.experience-block__nav {
position: absolute;
top: calc(100% + 14px);
display: flex;
align-items: center;
gap: 20px;
font-family: var(--font-jp);
font-size: 16px;
letter-spacing: 0.02em;
color: #000;
}
.experience-block:nth-child(odd) .experience-block__nav {
right: 24px;
}
.experience-block:nth-child(even) .experience-block__nav {
left: 24px;
}
.experience-block__nav-btn {
width: 22.5px;
height: 16px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
opacity: .7;
color: #000;
}
.experience-block__nav-btn:hover {
opacity: 1;
}
.experience-block__nav-btn svg {
width: 22.5px;
height: 8px;
display: block;
}
.experience-block__fraction {
font-variant-numeric: tabular-nums;
min-width: 48px;
text-align: center;
}
/* カード — 通常フロー (可変高さ)、画像にオーバーラップ。min-height 廃止でコンテンツに応じて伸びる */
.experience-block__card {
position: relative;
z-index: 2;
width: 478px;
background: #fff;
padding: 64px 32px;
display: flex;
flex-direction: column;
gap: 40px;
box-sizing: border-box;
}
.experience-block:nth-child(odd) .experience-block__card {
margin-left: 109px;
margin-right: auto;
}
.experience-block:nth-child(even) .experience-block__card {
margin-left: auto;
margin-right: 109px;
}
.experience-block__content {
display: flex;
flex-direction: column;
gap: 32px;
align-items: flex-start;
width: 100%;
}
.experience-block__head {
display: flex;
flex-direction: column;
gap: 27px;
align-items: flex-start;
margin: 0;
}
.experience-block__title-row {
display: flex;
gap: 24px;
align-items: center;
}
.experience-block__name {
font-family: var(--font-en);
font-weight: 400;
font-size: 30px;
line-height: 1;
letter-spacing: 0.03em;
color: #000;
}
.experience-block__rule {
display: block;
width: 90px;
height: 1px;
background: #000;
flex: 0 0 auto;
}
.experience-block__name-jp {
font-family: var(--font-jp);
font-weight: 400;
font-size: 16px;
line-height: 1;
letter-spacing: 0.24em;
color: #000;
margin: 0;
}
.experience-block__desc {
font-family: var(--font-jp);
font-size: 15px;
line-height: 2.2;
letter-spacing: 0.02em;
margin: 0;
color: #000;
}
.experience-block__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 180px;
height: 46px;
padding: 8px;
background: #fff;
border: 1px solid #000;
color: #000;
font-family: var(--font-jp);
font-weight: 500;
font-size: 15px;
letter-spacing: 0.15em;
text-decoration: none;
text-align: center;
align-self: flex-start;
transition: opacity .2s;
}
.experience-block__btn:hover {
opacity: .75;
}
/* Experience 固有: 有料/無料 badge + price badge + 注意事項 */
.experience-block__meta {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
margin: 0;
width: 100%;
}
.experience-block__badges {
display: inline-flex;
align-items: stretch;
}
.experience-block__badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 24px;
font-family: var(--font-jp);
font-weight: 400;
font-size: 15px;
line-height: 1;
letter-spacing: 0.02em;
border: 1px solid #000;
color: #000;
background: #fff;
white-space: nowrap;
}
.experience-block__badge--paid {
background: #000;
color: #fff;
}
.experience-block__badge--free {
background: #000;
color: #fff;
}
.experience-block__badge--price {
border-left-width: 0;
}
.experience-block__caveat {
font-family: var(--font-jp);
font-weight: 400;
font-size: 15px;
line-height: 1.5;
letter-spacing: 0.02em;
color: #000;
margin: 0;
}
/* Responsive — 縦積みレイアウト */
@media (max-width: 1199px) {
.experience-blocks {
gap: 96px;
padding: 40px 0 0;
margin-bottom: 80px;
}
.experience-block__upper {
min-height: 0;
padding-top: 0;
}
.experience-block__main-media,
.experience-block:nth-child(odd) .experience-block__main-media,
.experience-block:nth-child(even) .experience-block__main-media {
position: static;
left: auto;
right: auto;
width: 100%;
max-width: none;
margin: 0;
height: auto;
aspect-ratio: 1230 / 580;
}
.experience-block__slider {
width: 100%;
height: 100%;
}
.experience-block__nav,
.experience-block:nth-child(odd) .experience-block__nav,
.experience-block:nth-child(even) .experience-block__nav {
position: static;
left: auto;
right: auto;
justify-content: center;
margin-top: 8px;
}
.experience-block__card,
.experience-block:nth-child(odd) .experience-block__card,
.experience-block:nth-child(even) .experience-block__card {
width: calc(100% - 48px);
max-width: 613px;
margin: -48px auto 0;
padding: 32px 24px;
}
}
@media (max-width: 640px) {
.experience-block__name {
font-size: 26px;
}
.experience-block__card {
padding: 24px 20px;
}
.experience-block__badge {
padding: 6px 18px;
font-size: 14px;
}
}