@charset "UTF-8"; /* ============================================================ Mökki NASU - Base Stylesheet Mobile first / Ivory × Brown / Nordic ============================================================ */ /* ---------- 1. カラー・変数 ---------- */ :root { /* Base */ --ivory: #F7F3EC; --ivory-deep: #EFE8DC; --white: #FFFDF9; /* Brown */ --brown: #6B5545; --brown-dark: #4A3A2E; --brown-light: #9C8875; --beige: #D9CCB9; /* Accent */ --moss: #7C8471; /* Text */ --text: #3D332C; --text-muted: #8A7C70; /* Type */ --font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --font-en: "Cormorant Garamond", "Times New Roman", serif; /* Layout */ --container: 1120px; --gutter: 24px; --header-h: 64px; --radius: 4px; } /* ---------- 2. リセット ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-jp); font-weight: 300; font-size: 15px; line-height: 2; letter-spacing: 0.04em; color: var(--text); background: var(--ivory); } img { display: block; max-width: 100%; height: auto; /* 写真が未配置の間もレイアウトが崩れないよう下地を敷く */ background: var(--beige); color: transparent; font-size: 0; } a { color: inherit; text-decoration: none; transition: opacity .3s ease, color .3s ease; } a:hover { opacity: .65; } h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.6; letter-spacing: 0.08em; } p { margin: 0 0 1.4em; } ul { margin: 0; padding: 0; list-style: none; } dl, dd { margin: 0; } /* ---------- 2.5 言語切り替え ---------- .ja / .en を両方HTMLに持たせ、 で表示側だけを出す。 head のスクリプトで先に data-lang を決めるので、切り替わりは見えない。 */ html[data-lang="ja"] .en, html[data-lang="en"] .ja { display: none; } /* ---------- 3. 共通レイアウト ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: 72px; } .section__label { margin-bottom: 8px; font-family: var(--font-en); font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brown-light); } .section__label--light { color: var(--beige); } .section__title { margin-bottom: 32px; font-size: 24px; color: var(--brown-dark); } .section__title--light { color: var(--white); } .section__lead { margin-bottom: 40px; color: var(--text-muted); } /* ---------- 4. ボタン ---------- */ .btn { display: inline-block; padding: 16px 40px; border: 1px solid currentColor; border-radius: var(--radius); font-family: var(--font-en); font-size: 15px; letter-spacing: 0.14em; line-height: 1; text-align: center; transition: background-color .3s ease, color .3s ease; } .btn--light { color: var(--white); border-color: rgba(255, 253, 249, .7); background: rgba(74, 58, 46, .25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .btn--light:hover { opacity: 1; color: var(--brown-dark); background: var(--white); } .btn--outline { color: var(--white); border-color: var(--beige); } .btn--outline:hover { opacity: 1; color: var(--brown-dark); background: var(--ivory); border-color: var(--ivory); } /* ---------- 5. ヘッダー ---------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); border-bottom: 1px solid var(--ivory-deep); } /* すりガラス効果は擬似要素に持たせる。 .header 自身に backdrop-filter を付けると position:fixed の 子要素（ドロワー）の基準がヘッダーになり、高さが潰れるため。 */ .header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(247, 243, 236, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .header__inner { position: relative; display: flex; align-items: center; gap: 16px; height: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } /* ロゴ */ .logo { display: flex; align-items: baseline; gap: 8px; margin: 0; } /* ロゴを左端に固定し、残りを右側へ寄せる */ .header .logo { margin-right: auto; } .logo__mark { font-family: var(--font-en); font-size: 24px; letter-spacing: 0.06em; color: var(--brown-dark); } .logo__sub { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.3em; color: var(--brown-light); } /* ハンバーガー（CSSのみで開閉） */ .nav-toggle { position: absolute; opacity: 0; pointer-events: none; } .nav-button { position: relative; z-index: 110; display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 32px; height: 32px; cursor: pointer; } .nav-button span { display: block; width: 100%; height: 1px; background: var(--brown-dark); transition: transform .3s ease, opacity .3s ease; } .nav-toggle:checked + .nav-button span:nth-child(1) { transform: translateY(7px) rotate(35deg); } .nav-toggle:checked + .nav-button span:nth-child(2) { opacity: 0; } .nav-toggle:checked + .nav-button span:nth-child(3) { transform: translateY(-7px) rotate(-35deg); } /* ナビ（モバイル：全画面ドロワー） */ .nav { position: fixed; inset: var(--header-h) 0 0 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; background: var(--ivory); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .35s ease, transform .35s ease, visibility .35s; } .nav-toggle:checked ~ .nav { opacity: 1; visibility: visible; transform: translateY(0); } .nav__list { display: flex; flex-direction: column; align-items: center; gap: 28px; font-size: 16px; letter-spacing: 0.16em; } .nav__cta { padding: 14px 32px; border: 1px solid var(--brown); border-radius: var(--radius); font-size: 13px; letter-spacing: 0.12em; color: var(--brown-dark); } /* 言語切り替えボタン */ .langswitch { display: flex; align-items: center; border: 1px solid var(--beige); border-radius: 999px; overflow: hidden; background: var(--white); } .langswitch__btn { appearance: none; -webkit-appearance: none; margin: 0; padding: 7px 12px; border: 0; background: transparent; font-family: inherit; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; line-height: 1.4; white-space: nowrap; color: var(--brown-light); cursor: pointer; transition: background-color .3s ease, color .3s ease; } .langswitch__btn:hover { color: var(--brown-dark); } /* 選択中の言語 */ .langswitch__btn[aria-pressed="true"] { background: var(--brown); color: var(--white); } /* ---------- 6. ヒーロー ---------- */ .hero { position: relative; display: flex; align-items: flex-end; min-height: 100svh; /* 左右は .container と同じ位置で揃える */ padding: calc(var(--header-h) + 40px) calc(var(--gutter) + max(0px, (100% - var(--container)) / 2)) 112px; color: var(--white); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; /* 画像が未配置でも成立するようブラウンのグラデーションを敷く */ background: linear-gradient(160deg, var(--brown-light) 0%, var(--brown) 45%, var(--brown-dark) 100%); } .hero__media img { width: 100%; height: 100%; object-fit: cover; } /* 文字可読性のためのオーバーレイ。 明るい室内写真でも白文字が読めるよう、 文字のある左下に向かって濃くなる2枚重ねにしている。 */ .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: /* 文字のある左下の角にだけ影を寄せる。 斜め方向にすることで、天井の写る上部は素の明るさのまま残す。 */ linear-gradient( to top right, rgba(61, 51, 44, .42) 0%, rgba(61, 51, 44, .14) 36%, rgba(61, 51, 44, 0) 66% ), linear-gradient( to top, rgba(61, 51, 44, .26) 0%, rgba(61, 51, 44, .05) 45%, rgba(61, 51, 44, 0) 70% ); } .hero__body { max-width: 640px; /* 写真を暗くせずに文字を読ませるため、覆いは薄くして影で輪郭を出す。 近距離の影で縁取り、遠距離の影で背景をわずかに沈める2段構成。 */ text-shadow: 0 1px 3px rgba(61, 51, 44, .55), 0 2px 22px rgba(61, 51, 44, .65); } .hero__eyebrow { margin-bottom: 16px; font-family: var(--font-en); font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ivory); /* 細い欧文が窓の明部に重なるため、影を強めに */ text-shadow: 0 1px 10px rgba(61, 51, 44, .85); } .hero__title { margin-bottom: 24px; /* 320px級の狭い画面でも「もうひとつの暮らし。」が1行に収まるよう可変に */ font-size: clamp(23px, 7vw, 28px); line-height: 1.8; letter-spacing: 0.1em; } .hero__title .line { display: block; } .hero__lead { margin-bottom: 36px; font-size: clamp(13px, 3.8vw, 14px); line-height: 2.2; } .hero__scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-family: var(--font-en); font-size: 11px; letter-spacing: 0.3em; color: var(--beige); } .hero__scroll::after { content: ""; display: block; width: 1px; height: 32px; margin: 8px auto 0; background: linear-gradient(to bottom, var(--beige), transparent); } /* ---------- 7. コンセプト ---------- */ .concept { background: var(--ivory); } .concept__grid { display: grid; gap: 40px; } .concept__text p { color: var(--text); } .concept__points { display: grid; gap: 24px; padding: 32px 24px; background: var(--white); border-radius: var(--radius); } .concept__points h3 { margin-bottom: 4px; font-family: var(--font-en); font-size: 20px; letter-spacing: 0.12em; color: var(--brown); } .concept__points p { margin: 0; font-size: 14px; line-height: 1.9; color: var(--text-muted); } /* 写真が横位置（4:3）のため、枠も横長で揃える */ .concept__gallery { display: grid; gap: 16px; margin-top: 48px; } .concept__gallery figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--beige); } .concept__gallery img { width: 100%; height: 100%; object-fit: cover; } /* ---------- 8. 物件情報 ---------- */ .house { background: var(--ivory-deep); } .house__grid { display: grid; gap: 40px; } .house__visual { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--beige); } .house__visual img { width: 100%; height: 100%; object-fit: cover; } /* スペック表 */ .spec { border-top: 1px solid var(--beige); } .spec__row { display: grid; gap: 2px; padding: 16px 4px; border-bottom: 1px solid var(--beige); } .spec dt { font-size: 13px; letter-spacing: 0.12em; color: var(--brown-light); } .spec dd { font-size: 15px; line-height: 1.8; } /* スペック表の下に添える補足 */ .spec__note { margin: 16px 0 0; font-size: 13px; line-height: 1.9; color: var(--text-muted); } .house__subtitle { margin: 40px 0 16px; font-family: var(--font-en); font-size: 18px; letter-spacing: 0.14em; color: var(--brown); } .amenities { display: flex; flex-wrap: wrap; gap: 8px; } .amenities li { padding: 6px 16px; border: 1px solid var(--brown-light); border-radius: 999px; font-size: 13px; line-height: 1.6; color: var(--brown); background: var(--white); } /* ---------- 9. 予約 ---------- */ .booking { background: var(--brown-dark); color: var(--ivory); text-align: center; } .booking__inner { display: flex; flex-direction: column; align-items: center; } .booking__text { max-width: 34em; margin-bottom: 32px; font-size: 14px; line-height: 2.2; text-wrap: balance; color: var(--ivory-deep); } .booking__note { margin: 24px 0 0; font-size: 12px; line-height: 2; color: var(--brown-light); } /* ---------- 10. 周辺観光 ---------- */ .area { background: var(--ivory); } .cards { display: grid; gap: 32px; } .card__media { aspect-ratio: 4 / 3; margin-bottom: 16px; overflow: hidden; border-radius: var(--radius); background: var(--beige); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .card:hover .card__media img { transform: scale(1.04); } .card__meta { margin-bottom: 4px; font-size: 12px; letter-spacing: 0.16em; color: var(--brown-light); } .card__title { margin-bottom: 8px; font-size: 17px; color: var(--brown-dark); } .card__text { margin: 0 0 12px; font-size: 14px; line-height: 1.9; color: var(--text-muted); } .card__link { display: inline-block; font-size: 13px; letter-spacing: 0.08em; color: var(--brown); border-bottom: 1px solid var(--beige); padding-bottom: 2px; } .card__link::after { content: "↗"; margin-left: 6px; font-size: 11px; } /* ---------- 11. フッター ---------- */ .footer { padding: 56px 0 24px; background: var(--ivory-deep); border-top: 1px solid var(--beige); } .footer__inner { display: grid; gap: 32px; padding-bottom: 40px; } .logo--footer { display: flex; } .footer__address { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); } .footer__nav { display: grid; gap: 12px; font-size: 14px; } .footer__copy { margin: 0; padding-top: 24px; border-top: 1px solid var(--beige); font-family: var(--font-en); font-size: 12px; letter-spacing: 0.1em; text-align: center; color: var(--brown-light); } /* ============================================================ 12. タブレット以上（768px〜） ============================================================ */ @media (min-width: 768px) { :root { --gutter: 40px; --header-h: 80px; } body { font-size: 16px; } .section { padding-block: 120px; } .section__title { font-size: 32px; margin-bottom: 48px; } /* ナビを横並びに戻す */ .nav-button { display: none; } .nav { position: static; flex-direction: row; gap: 32px; background: transparent; opacity: 1; visibility: visible; transform: none; } .nav__list { flex-direction: row; gap: 32px; font-size: 14px; } .nav__cta { padding: 10px 22px; font-size: 12px; } /* ヒーロー */ .hero { padding-bottom: 120px; } .hero__title { font-size: 42px; } .hero__lead { font-size: 15px; } /* コンセプト */ .concept__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .concept__points { padding: 40px; } .concept__gallery { grid-template-columns: repeat(3, 1fr); gap: 20px; } /* 物件情報 */ .house__grid { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .spec__row { grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; } /* 周辺観光 */ .cards { grid-template-columns: repeat(2, 1fr); gap: 40px; } /* フッター */ .footer__inner { grid-template-columns: 1fr auto; align-items: start; } .footer__nav { grid-auto-flow: column; gap: 32px; } } /* ============================================================ 13. デスクトップ（1024px〜） ============================================================ */ @media (min-width: 1024px) { .hero__title { font-size: 52px; } .cards { grid-template-columns: repeat(4, 1fr); gap: 32px; } } /* ---------- 14. アクセシビリティ ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } :focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }