に出すため、セレクタは body から始めず .page-template-page-front から始める必要がある。 get_header() は以下のラッパーを出力する: - #main_visual.p-mainVisual … SWELL 標準のトップスライダー - #content.l-content.l-container … メインコンテンツの幅制約コンテナ - .top #content { padding-top:4em } … フロントページの上余白フロントページではこれらを全て無効化して、自前のフル幅セクションがそのまま画面端まで広がるようにする。 ============================================================ */ /* メインビジュアル（SWELL 標準のトップヒーロー / スライダー）を非表示 */ .page-template-page-front #main_visual, .page-template-page-front .p-mainVisual { display: none !important; } /* ページタイトル・パンくず・投稿ヘッダーを念のため非表示 */ .page-template-page-front .l-topTitleArea, .page-template-page-front .p-breadcrumb, .page-template-page-front .c-pageTitle, .page-template-page-front .l-mainContent__pageHeader { display: none !important; } /* サイドバー領域を念のため非表示（1カラム化） */ .page-template-page-front .l-sidebar, .page-template-page-front #sidebar, .page-template-page-front .p-sideWidgetArea { display: none !important; } /* コンテンツラッパーの幅制約 / 余白 / 装飾を全解除してフル幅化 #content は .l-content と .l-container の両方を持つので、どちらの max-width / padding も打ち消す必要がある。また、SWELL は .top #content { padding-top: 4em } を当てているのでこれも 0 に戻す。 */ .page-template-page-front #content, .page-template-page-front #content.l-content, .page-template-page-front #content.l-container, .top.page-template-page-front #content { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; } /* SWELL の article 投稿スタイル（タイトル直下の余白等）を解除 */ .page-template-page-front article.post, .page-template-page-front article.page { padding: 0 !important; margin: 0 !important; } /* ============================================================ Reset / Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* 装飾用のはみ出し要素（.rent__circle 等）で横スクロールが発生しないようにクリップ。ビューポートのスクロールは html 側で決まるため、body だけでは効かないので両方に指定 */ overflow-x: clip; } body { margin: 0; font-family: var(--font-ja) !important; font-size: 16px; line-height: 1.8; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: opacity .2s ease; } a:hover { opacity: .7; } ul, ol { list-style: none; padding: 0; margin: 0; } h1, h2, h3, h4 { margin: 0; line-height: 1.4; font-weight: 700; } p { margin: 0; } button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } address { font-style: normal; } /* ============================================================ Layout helpers ============================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section-head { margin-bottom: 40px; } .section-head--center { text-align: center; } .section-head__en { display: block; font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .15em; color: var(--color-text-soft); margin-bottom: 8px; } .section-head__ja { font-size: clamp(22px, 3.2vw, 32px); font-weight: 900; letter-spacing: .04em; } .section-head__desc { margin-top: 16px; color: var(--color-text-soft); } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 14px 32px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: .08em; transition: transform .2s ease, background .2s ease, color .2s ease; } .btn--primary { background: var(--color-accent); color: var(--color-dark); } .btn--primary:hover { background: var(--color-accent-dark); opacity: 1; transform: translateY(-1px); } .btn--header { background: var(--color-accent); color: var(--color-dark); padding: 10px 20px; font-size: 13px; } .btn--dark-pill { background: var(--color-dark); color: #fff; padding: 14px 28px; font-size: 13px; } .btn--dark-pill:hover { background: #000; opacity: 1; transform: translateY(-1px); } .btn--ghost-dark { background: var(--color-dark); color: #fff; padding: 14px 48px; } .btn--ghost-dark:hover { opacity: 1; background: #000; } /* LINE 丸ボタン */ .btn-line { width: 44px; height: 44px; border-radius: 50%; background: var(--color-dark); color: #fff; display: inline-grid; place-items: center; font-family: var(--font-en); font-weight: 700; font-size: 10px; letter-spacing: .05em; flex-shrink: 0; transition: background .2s ease, transform .2s ease; } .btn-line:hover { background: #000; opacity: 1; transform: translateY(-1px); } .link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 700; font-size: 13px; letter-spacing: .08em; border-bottom: 1px solid currentColor; padding-bottom: 4px; } .link-arrow::after { content: "→"; } /* ============================================================ Header ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); z-index: 100; transition: box-shadow .2s ease; } .site-header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, .05); } .site-header__inner { height: 100%; max-width: 1480px; margin-inline: auto; padding-inline: 32px; display: flex; align-items: center; gap: 24px; } .site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; } .site-header__logo img { height: 56px; width: auto; display: block; } .site-nav { margin-inline-start: auto; } .site-nav__list { display: flex; gap: 28px; } .site-nav__list a { font-size: 14px; font-weight: 700; letter-spacing: .04em; } .site-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .hamburger { display: none; width: 32px; height: 32px; position: relative; margin-inline-start: auto; } .hamburger span { position: absolute; left: 4px; right: 4px; height: 2px; background: var(--color-dark); transition: transform .3s ease, opacity .3s ease, top .3s ease; } .hamburger span:nth-child(1) { top: 9px; } .hamburger span:nth-child(2) { top: 15px; } .hamburger span:nth-child(3) { top: 21px; } .hamburger.is-open span:nth-child(1) { top: 15px; transform: rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { top: 15px; transform: rotate(-45deg); } /* ============================================================ Hero (Full-bleed photo + watermark crest) ============================================================ */ .hero { position: relative; width: 100%; height: calc(100vh - var(--header-h)); min-height: 560px; /* margin-top: var(--header-h); */ overflow: hidden; background: #f0ece4; z-index: 2; } .hero__media { position: absolute; inset: 0; } .hero__photo { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__crest { position: absolute; right: 5vw; bottom: 8vh; width: clamp(160px, 22vw, 320px); aspect-ratio: 1 / 1; pointer-events: none; } .hero__crest img { width: 100%; height: 100%; object-fit: contain; } /* ============================================================ Introduction ============================================================ */ .intro { position: relative; background: #fff; /* 横方向のみクリップ。intro__bg-circle が左にはみ出すのを内側で止める。縦方向は visible のままにして、外側へのレイアウト影響を出さない */ overflow-x: clip; overflow-y: visible; } .intro__layout { position: relative; z-index: 1; /* asset10 より前面に */ display: grid; grid-template-columns: 5fr 7fr; align-items: stretch; } /* --- Left --- */ .intro__left { position: relative; padding: 96px 0 200px; /* overflow: hidden; */ /* 円を左カラム範囲内で見切れさせる（hero に被らないように）*/ } /* 左寄せの真円（テキストエリアの背景）— 左カラム幅基準でスケール */ .intro__bg-circle { position: absolute; top: -20%; left: -65%; width: 185%; aspect-ratio: 1 / 1; border-radius: 50%; background: #f3f0ea; z-index: 0; pointer-events: none; } .intro__inner { position: relative; z-index: 1; max-width: 460px; margin-left: auto; margin-right: 0; padding: 0 48px 0 64px; display: flex; flex-direction: column; gap: 32px; } .intro__label { font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--color-dark); } .intro__heading-body { display: flex; flex-direction: column; gap: 64px; align-items: flex-start; } .intro__heading { writing-mode: vertical-rl; font-size: 26px; font-weight: 700; letter-spacing: .35em; line-height: 1.6; color: var(--color-dark); } .intro__heading span { display: block; } .intro__body { font-size: 13px; line-height: 2.2; color: var(--color-text); } .intro__btn { grid-area: btn; justify-self: start; margin-top: 16px; padding: 14px 56px; letter-spacing: .15em; } /* --- Right（Bento Grid 写真コラージュ）--- */ .intro__right { position: relative; /* padding: 24px 24px 24px 0; */ } .intro__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } .intro__cell { aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-bg-soft); } .intro__cell img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ for RENT ============================================================ */ .rent { position: relative; padding: 120px 0 96px; /* 横方向のみクリップ。rent__circle が右にはみ出すのを内側で止める。縦方向は visible のまま（上端から intro セクションへ asset10 をはみ出させる）*/ overflow-x: clip; overflow-y: visible; } /* 円+地図の大背景。rent セクション基準で上方向へ大きくはみ出す */ .rent__circle { position: absolute; top: -360px; /* intro セクション下部まで食い込ませる */ right: -6vw; width: clamp(900px, 80vw, 1320px); z-index: 0; pointer-events: none; } .rent__circle img { width: 100%; height: auto; display: block; } .rent__content { position: relative; z-index: 1; } .rent__head { max-width: 540px; padding: 40px 0 128px; } .rent__label { display: block; font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .2em; color: var(--color-dark); margin-bottom: 28px; } .rent__title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: .04em; margin-bottom: 32px; } .rent__desc { font-size: 14px; line-height: 2; color: var(--color-text); } /* 物件カード */ .rent__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 64px; } .property-card__img { position: relative; aspect-ratio: 4 / 3; background: var(--color-bg-soft); border-radius: 6px; overflow: hidden; margin-bottom: 16px; } .property-card__img img { width: 100%; height: 100%; object-fit: cover; } .property-card__badge { position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; background: var(--color-accent); color: var(--color-dark); font-family: var(--font-en); font-weight: 700; font-size: 12px; letter-spacing: .08em; display: grid; place-items: center; } .property-card__title { font-size: 15px; font-weight: 700; line-height: 1.6; margin-bottom: 12px; } .property-card__price { font-size: 15px; font-weight: 700; letter-spacing: .04em; margin-bottom: 6px; } .property-card__specs { font-size: 12px; color: var(--color-text-soft); line-height: 1.7; } .rent__cta { text-align: center; } /* 大きいピル系ボタン */ .btn--lg { padding: 20px 80px; font-size: 15px; letter-spacing: .25em; } /* ============================================================ Services ============================================================ */ .services { position: relative; background: transparent; padding: 100px 0 60px; margin: 0; z-index: 1; /* 横方向のみクリップ。::before の 200vw 楕円の左右はみ出しを内側で止める */ overflow-x: clip; overflow-y: visible; } /* 横長楕円の背景。border-radius の縦横半径をビューポート幅基準で固定して、セクションの高さに関係なく常に横長のなだらかなドーム形にする。下端は .staff にめり込ませて、黄色を丸で切り抜いたシルエットを作る。 */ .services::before { content: ""; position: absolute; top: -30px; bottom: -140px; left: 50%; transform: translateX(-50%); width: 200vw; background: #f3f1ec; /* 横半径=100vw（ビューポート幅）、縦半径=60vw で横長＆少し深めのドームに */ border-radius: 100vw / 60vw; z-index: -1; pointer-events: none; } .services__inner { position: relative; z-index: 1; } .services__head { text-align: left; margin-bottom: 72px; } .services__label { display: block; font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--color-dark); margin-bottom: 24px; } .services__title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; letter-spacing: .04em; line-height: 1.7; } /* --- Step bar (4 ステップ・ラベル付き) --- */ .step-bar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); /* デザインに合わせて目一杯広げる（左右に少し余白） */ max-width: 1040px; margin: 0 auto 96px; padding: 0 16px; } .step-bar::before { content: ""; position: absolute; top: 50%; left: 12.5%; right: 12.5%; height: 1px; background: #c8c5bd; transform: translateY(-50%); z-index: 0; } .step { position: relative; z-index: 1; /* 上下行を同じ高さにして、中央行(dot)が step の縦中心に来るようにする */ display: grid; grid-template-rows: 48px auto 48px; justify-items: center; text-align: center; } .step__num { align-self: end; margin-bottom: 10px; font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .15em; color: var(--color-text-soft); } .step__num strong { font-size: 26px; margin-left: 6px; color: var(--color-dark); font-weight: 900; } .step__dot { width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); } .step__name { align-self: start; margin-top: 10px; font-size: 14px; font-weight: 700; color: var(--color-dark); } /* --- Service cards (4枚・交互配置) --- */ .services__cards { display: grid; gap: 56px; } .service-card { display: flex; align-items: center; } .service-card--left { flex-direction: row-reverse; } /* body — 白角丸カード。・縦 padding を圧縮、visual 側に厚い padding(visual の食い込み分) ・SERVICE 見出しと MORE ボタンを absolute で body の上下にはみ出させる */ .service-card__body { flex: 1; background: #fff; border-radius: 4px; min-width: 0; position: relative; z-index: 1; box-shadow: 0 2px 16px rgba(0, 0, 0, .04); --pad-content: 56px; /* body 内コンテンツ側の余白 */ --pad-visual: 160px; /* visual がかぶる側の余白 */ } .service-card--right .service-card__body { padding: 40px var(--pad-visual) 32px var(--pad-content); } .service-card--left .service-card__body { padding: 40px var(--pad-content) 32px var(--pad-visual); } /* SERVICE n 見出し: body 上端からはみ出す */ .service-card__step { position: absolute; top: -12px; font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .15em; color: var(--color-dark); display: inline-flex; align-items: baseline; gap: 6px; margin: 0; line-height: 1; } .service-card__step strong { font-size: 44px; font-weight: 900; color: var(--color-dark); letter-spacing: 0; line-height: 1; } .service-card--right .service-card__step { left: var(--pad-content); } .service-card--left .service-card__step { left: var(--pad-visual); } .service-card__title { font-size: 28px; font-weight: 700; letter-spacing: .08em; margin-bottom: 16px; } .service-card__subtitle { font-size: 15px; font-weight: 700; line-height: 1.7; margin-bottom: 16px; } .service-card__desc { font-size: 12px; line-height: 2; color: var(--color-text); margin-bottom: 0; } /* MORE ボタン: body 下端からはみ出す */ .service-card__body .btn--sm { position: absolute; bottom: -18px; } .service-card--right .service-card__body .btn--sm { left: var(--pad-content); } .service-card--left .service-card__body .btn--sm { left: var(--pad-visual); } /* visual — 円形写真。少し大きめ。負 margin で body に深く食い込ませる */ .service-card__visual { flex-shrink: 0; width: clamp(320px, 38vw, 460px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; position: relative; z-index: 2; } .service-card__visual img { width: 100%; height: 100%; object-fit: cover; display: block; } .service-card--right .service-card__visual { margin-left: -130px; margin-right: 24px; } .service-card--left .service-card__visual { margin-right: -130px; margin-left: 24px; } /* label — 大きい・薄グレーの縦書き英字 */ .service-card__label { flex-shrink: 0; align-self: stretch; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; text-orientation: mixed; font-family: var(--font-en); font-weight: 500; font-size: clamp(26px, 3.2vw, 44px); letter-spacing: .1em; color: rgba(40, 38, 32, .22); white-space: nowrap; } /* --- 小サイズボタン --- */ .btn--sm { padding: 10px 36px; font-size: 12px; letter-spacing: .15em; } /* ============================================================ Staff ============================================================ */ .staff { position: relative; /* services の楕円下端（中央で 140px ぶん）が上から覆ってくるので、その分のクリアランスを確保。カーブと STAFF ラベルの間に余白をしっかり取る */ padding: 240px 0 120px; background: var(--color-accent); z-index: 0; /* 横方向のみクリップ。staff-card__en などの右にはみ出す要素を内側で止める */ overflow-x: clip; overflow-y: visible; } .staff>* { position: relative; } /* ヘッダー: 左にラベル+見出し+本文、右上に MORE ボタン */ .staff__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 64px; } .staff__head-text { flex: 1; min-width: 0; } .staff__label { display: block; font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--color-dark); margin-bottom: 24px; } .staff__title { font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; letter-spacing: .04em; margin-bottom: 24px; } .staff__desc { font-size: 13px; line-height: 2; color: var(--color-dark); } /* スタッフカード(3列) */ .staff__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .staff-card { display: flex; flex-direction: column; } .staff-card__visual { position: relative; aspect-ratio: 1 / 1; margin-bottom: 16px; } .staff-card__img { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: rgba(255, 255, 255, .15); } .staff-card__img img { width: 100%; height: 100%; object-fit: cover; } /* 円画像の右脇に縦書き英字名 */ .staff-card__en { position: absolute; top: 4%; right: -2%; writing-mode: vertical-rl; font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: .25em; color: var(--color-dark); white-space: nowrap; } .staff-card__name { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--color-dark); } .staff-card__desc { font-size: 12px; line-height: 1.9; color: var(--color-dark); } /* 白いピルボタン(黄色背景上で使用) */ .btn--white-pill { background: #fff; color: var(--color-dark); padding: 14px 48px; font-size: 13px; letter-spacing: .25em; flex-shrink: 0; margin-top: 24px; /* タイトル基線あたりに揃える */ } .btn--white-pill:hover { background: #fff; opacity: 1; transform: translateY(-1px); } /* ============================================================ User's Voice (CASE 1〜5 縦タブ・カルーセル) ============================================================ */ .voice { background: #ece6d8; padding: 96px 0 120px; /* 横方向のみクリップ。voice 内部のはみ出しを内側で止める */ overflow-x: clip; overflow-y: visible; } .voice__title { font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .25em; color: var(--color-dark); margin-bottom: 80px; } .voice__layout { display: grid; grid-template-columns: 200px 1fr; gap: 48px; align-items: start; } /* --- 左サイド: CASE ナビゲーション（静的に表示。動くのは右ケースのみ） --- */ .voice__nav-viewport { position: relative; } .voice__nav { display: grid; gap: 24px; } .voice__nav-item { display: flex; align-items: center; gap: 16px; font-family: var(--font-en); font-weight: 700; font-size: 13px; letter-spacing: .15em; color: var(--color-text-soft); cursor: pointer; background: none; border: 0; padding: 0; transition: color .2s ease; } .voice__nav-item::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c4c0b6; transition: background .2s ease, transform .2s ease; } .voice__nav-item:hover { color: var(--color-dark); } .voice__nav-item.is-active { color: var(--color-dark); } .voice__nav-item.is-active::before { background: var(--color-accent); transform: scale(1.6); } /* --- 右サイド: viewport + track でカルーセル化 --- */ .voice { /* JS から参照する寸法を CSS 変数で定義ナビは静的、右ケースのみ 1 スライド分（caseH + gap）ずつスライド。 viewport-h はケース1枚分（次のケースが少しpeekする余白を含む） */ --voice-case-h: 360px; --voice-gap: 16px; --voice-viewport-h: 400px; /* 上下フェード範囲。端の case 選択時は片側を 0%/100% にして fade 解除 */ --voice-fade-top: 4%; --voice-fade-bottom: 96%; } .voice.is-at-top { --voice-fade-top: 0%; } .voice.is-at-bottom { --voice-fade-bottom: 100%; } .voice__viewport { position: relative; height: var(--voice-viewport-h); overflow: hidden; /* 上部はマスクせず（はっきり表示）、下部だけフェードする */ -webkit-mask-image: linear-gradient(to bottom, black 0%, black var(--voice-fade-bottom), transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black var(--voice-fade-bottom), transparent 100%); } .voice__cases { display: flex; flex-direction: column; gap: var(--voice-gap); transition: transform .55s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .voice-case { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; height: var(--voice-case-h); flex-shrink: 0; opacity: .25; transition: opacity .35s ease; } .voice-case.is-active { opacity: 1; } .voice-case__text { padding-top: 8px; overflow: hidden; height: 100%; } .voice-case__name { font-size: 22px; font-weight: 700; letter-spacing: .04em; margin-bottom: 12px; } .voice-case__meta { font-size: 13px; color: var(--color-text-soft); margin-bottom: 32px; } .voice-case__desc { font-size: 12px; line-height: 2; color: var(--color-dark); } .voice-case__img { height: 100%; background: rgba(0, 0, 0, .04); border-radius: 4px; overflow: hidden; } .voice-case__img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ News (4列・タグ付き) ============================================================ */ .news { padding: 96px 0; background: #fff; } .news__head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 64px; } .news__title { font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .25em; color: var(--color-dark); } .news__more { padding: 14px 56px; letter-spacing: .25em; } .news__list { display: grid; grid-template-columns: repeat(4, 1fr); } .news-item { padding: 4px 24px 8px; border-left: 1px solid var(--color-line); } .news__list .news-item:last-child { border-right: 1px solid var(--color-line); } .news-item__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .news-item__date { font-family: var(--font-en); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--color-dark); } .news-item__tag { background: var(--color-accent); color: var(--color-dark); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 12px; border-radius: 999px; line-height: 1.4; } .news-item__desc { font-size: 12px; line-height: 1.9; color: var(--color-dark); } /* ============================================================ Office Gallery (オートスライド) ============================================================ */ .gallery { padding: 96px 0 120px; background: #fff; overflow: hidden; } .gallery__title { font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .25em; color: var(--color-dark); margin-bottom: 56px; } .gallery__viewport { width: 100%; overflow: hidden; } /* 7枚 × 2セット = 14アイテムを 14列 × 2行のグリッドに配置 */ .gallery__track { /* CSS変数で寸法管理 */ --col-w: 240px; --row-h: 240px; --g-gap: 16px; --cols-per-set: 7; display: grid; grid-template-rows: var(--row-h) var(--row-h); grid-template-columns: repeat(14, var(--col-w)); grid-template-areas: "a b c c c d g a2 b2 c2 c2 c2 d2 g2" "e e c c c f g e2 e2 c2 c2 c2 f2 g2"; gap: var(--g-gap); width: max-content; list-style: none; padding: 0; margin: 0; /* 1セット分(7列+7gap = 1792px)を左にスライド */ animation: gallery-slide 60s linear infinite; } @keyframes gallery-slide { to { transform: translateX(calc(-1 * var(--cols-per-set) * (var(--col-w) + var(--g-gap)))); } } .g { border-radius: 12px; overflow: hidden; background: var(--color-bg-soft); } .g img { width: 100%; height: 100%; object-fit: cover; display: block; } /* セル割当(set 1) */ .g--a { grid-area: a; } .g--b { grid-area: b; } .g--c { grid-area: c; } .g--d { grid-area: d; } .g--e { grid-area: e; } .g--f { grid-area: f; } .g--g { grid-area: g; } /* セル割当(set 2 / クローン) */ .g--a2 { grid-area: a2; } .g--b2 { grid-area: b2; } .g--c2 { grid-area: c2; } .g--d2 { grid-area: d2; } .g--e2 { grid-area: e2; } .g--f2 { grid-area: f2; } .g--g2 { grid-area: g2; } /* prefers-reduced-motion 対応 */ @media (prefers-reduced-motion: reduce) { .gallery__track { animation: none; } } /* ============================================================ Contact (Get Intouch / カード・中央 1カラム) ============================================================ */ .contact { position: relative; padding: 96px 0 80px; background: transparent; z-index: 1; /* 横方向のみクリップ。::before の 200vw 楕円の左右はみ出しを内側で止める。縦方向は visible のまま（グレー楕円が footer の左右脇まで下に伸びる）*/ overflow-x: clip; overflow-y: visible; } /* GET INTOUCH 見出しのテキスト中央を頂点として、横長のドーム（半楕円）のグレー背景を描画。上端は丸く、下端は直線でカット。下端は contact 下端を超えて footer の上半分まで伸び、 footer 側で半楕円型に切り抜かれた白がそのグレーに重なって、上端ラウンドが生まれる。フッターより下にグレーが残らないよう height を 60vw に制限している。 */ .contact::before { content: ""; position: absolute; /* PC: padding-top 96 + タイトル font-size 88 の半分 = 140 */ top: 140px; left: 50%; transform: translateX(-50%); width: 200vw; height: 60vw; background: #f3f1ec; /* 上端のみ丸める。rx=100vw, ry=60vw（元の楕円の上半分と同じ曲率）。下端は直線 */ border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: -1; pointer-events: none; } .contact__title { text-align: center; font-family: var(--font-en); font-size: clamp(48px, 7vw, 88px); font-weight: 700; letter-spacing: .04em; color: var(--color-dark); margin-bottom: 64px; line-height: 1; } /* カード本体: 中央配置 */ .contact-card { position: relative; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, .08); max-width: 480px; margin: 0 auto; transition: transform .2s ease, box-shadow .2s ease; z-index: 1; } .contact-card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(0, 0, 0, .12); } /* 黄色ヘッダー */ .contact-card__head { background: var(--color-accent); padding: 24px 16px 20px; text-align: center; } .contact-card__cat-jp { font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--color-dark); line-height: 1.3; } .contact-card__cat-en { font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: .15em; color: rgba(0, 0, 0, .55); margin-top: 6px; line-height: 1.3; } /* 白ボディ */ .contact-card__body { padding: 40px 24px; text-align: center; display: grid; gap: 8px; justify-items: center; } .contact-card__phone { font-family: var(--font-en); font-size: 30px; font-weight: 600; letter-spacing: .02em; color: var(--color-dark); line-height: 1; } .contact-card__phone:hover { opacity: 1; color: var(--color-dark); } .contact-card__hours { font-size: 13px; letter-spacing: .04em; color: var(--color-text-soft); margin-bottom: 24px; } .contact-card__mail { padding: 12px 48px; font-size: 12px; letter-spacing: .25em; } /* ============================================================ Footer ============================================================ */ .site-footer { position: relative; /* 背景は ::before / ::after で描画する（contact dome と同じ 200vw × 60vw の半楕円で描くことで、両端まで滑らかにカーブが続く） */ background: transparent; /* 上端のドーム頂点（footer 中央）からコンテンツを下げるため padding-top を確保 */ padding: 80px 0 32px; /* contact のグレー楕円より前に描画する。これでフッターの白いドームが contact のグレーをくり抜いたシルエットになる */ z-index: 2; /* ::before のドームが footer 領域外まで伸びてもスクロール領域を増やさないようクリップ */ overflow: hidden; } /* 上端の白いドーム。contact のグレードームと同じ 200vw × 60vw の半楕円。ドーム自体が viewport 幅（100vw）より広いため、両端で曲線がそのまま画面外に続き、border-radius でコーナーを丸める方法のような端の「きゅっと」が発生しない。ビューポート両端では頂点から 60vw × (1 - √0.75) ≒ 8vw 降下した位置に曲線が来る。 */ .site-footer::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 200vw; height: 60vw; background: #fff; /* contact ::before と同じ。上端のみ丸める半楕円シルエット */ border-radius: 50% 50% 0 0 / 100% 100% 0 0; z-index: -1; pointer-events: none; } /* ドーム下端（top: 60vw）から footer 下端まで白を塗る矩形。 60vw が footer 高さより大きい場合は overflow: hidden により自動的にクリップされる */ .site-footer::after { content: ""; position: absolute; top: 60vw; left: 0; right: 0; bottom: 0; background: #fff; z-index: -1; pointer-events: none; } /* 中央寄せの大ロゴ（ラウンドのすぐ下に配置） */ .site-footer__logo-wrap { position: relative; text-align: center; margin-bottom: 80px; } .site-footer__logo { height: 200px; width: auto; display: inline-block; } .site-footer__inner { position: relative; display: grid; grid-template-columns: 1fr auto auto; gap: 80px; align-items: start; } .site-footer__address { font-size: 13px; line-height: 2; color: var(--color-text); } .site-footer__nav { display: grid; grid-template-columns: auto auto; gap: 0 64px; } .site-footer__nav ul { display: grid; gap: 18px; font-size: 13px; font-weight: 700; padding-left: 24px; border-left: 1px solid var(--color-line); } /* SWELL 親テーマがフッターリンクに青色を当ててくるため、テキスト色を継承させる */ .site-footer a, .site-footer__address a, .site-footer__nav a { color: inherit; text-decoration: none; } .site-footer a:hover { opacity: .7; } .site-footer__sponsor { font-size: 11px; letter-spacing: .15em; color: var(--color-text-soft); text-align: left; min-width: 160px; } .site-footer__sponsor-label { display: block; margin-bottom: 8px; } .site-footer__sponsor-box { background: #f3f1ec; border-radius: 12px; padding: 12px 20px; min-height: 64px; display: flex; align-items: center; justify-content: center; transition: opacity .2s ease; } .site-footer__sponsor-box img { max-height: 40px; width: auto; display: block; /* 画像の白背景を透過させて、外側のボックスカラーになじませる */ mix-blend-mode: multiply; } .site-footer__copy { grid-column: 1 / -1; font-size: 12px; color: var(--color-text-soft); text-align: center; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--color-line); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1180px) { .site-nav__list { gap: 20px; } .site-nav__list a { font-size: 13px; } .site-header__inner { padding-inline: 24px; } } @media (max-width: 1024px) { :root { --header-h: 80px; } .site-nav { position: fixed; top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--color-line); transform: translateY(-120%); transition: transform .3s ease; margin: 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto; } .site-nav.is-open { transform: translateY(0); } .site-nav__list { flex-direction: column; padding: 16px var(--gutter); gap: 0; } .site-nav__list li { border-bottom: 1px solid var(--color-line); } .site-nav__list a { display: block; padding: 14px 0; font-size: 14px; } .site-header__actions { margin-inline-start: auto; } .btn--dark-pill { padding: 10px 16px; font-size: 12px; } .hamburger { display: block; } .site-header__logo img { height: 44px; } } @media (max-width: 640px) { .site-header__actions .btn--dark-pill { display: none; } } @media (max-width: 960px) { .intro__layout { grid-template-columns: 1fr; min-height: auto; } .intro__left { padding: 64px 0 96px; } .intro__bg-circle { /* さらに拡大して、上方向にもオフセット */ top: -20%; left: -55%; width: 195%; } .intro__inner { max-width: 560px; margin-inline: auto; padding: 0 24px; gap: 24px; } .intro__heading-body { flex-direction: column; align-items: stretch; gap: 40px; } .intro__heading { font-size: 22px; align-self: flex-start; } .intro__btn { align-self: center; } .intro__right { padding: 0; } .rent { padding: 80px 0 64px; } .rent__circle { top: -200px; right: -16vw; width: 110vw; opacity: .75; /* 可読性確保 */ } .rent__head { max-width: 100%; padding: 24px 0 56px; } .rent__cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } .btn--lg { padding: 18px 64px; } /* Services モバイル/タブレット版: 縦積み、ラベルは横書きの上付け */ .services { padding: 64px 0 40px; } .services__inner { /* 左右にもう少しゆとりを持たせる */ padding-inline: 32px; } .services__cards { gap: 48px; } .services::before { top: -20px; bottom: -100px; } .services__head { margin-bottom: 32px; } .step-bar { margin-bottom: 56px; } .step__num { font-size: 10px; } .step__num strong { font-size: 16px; } .step__name { font-size: 11px; } .service-card, .service-card--left { flex-direction: column; align-items: center; text-align: center; } /* PC用の非対称 padding と absolute を解除 */ .service-card--right .service-card__body, .service-card--left .service-card__body { padding: 32px 24px; width: 100%; order: 2; } .service-card__step, .service-card__body .btn--sm { position: static; } .service-card__step { justify-content: center; margin-bottom: 16px; } .service-card__desc { margin-bottom: 24px; } .service-card__visual { /* 画面幅に応じて 160〜220px の間で可変。下に -40px 食い込ませて白カードと一体感を出す */ width: clamp(160px, 28vw, 220px); order: 1; margin: 0 auto -40px !important; } .service-card__label { writing-mode: horizontal-tb; font-size: clamp(14px, 2.4vw, 18px); letter-spacing: .25em; align-self: center; order: 0; margin-bottom: 16px; color: rgba(40, 38, 32, .4); } /* Staff モバイル */ .staff { padding: 180px 0 96px; } .staff__head { flex-direction: column; gap: 24px; margin-bottom: 40px; } .btn--white-pill { margin-top: 0; align-self: flex-start; padding: 12px 36px; } .staff__list { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; gap: 32px; } .staff-card__en { font-size: 11px; } /* User's Voice モバイル: タブで切り替え（PCと同じ挙動） */ .voice { padding: 64px 0 96px; } .voice__title { margin-bottom: 40px; } .voice__layout { grid-template-columns: 1fr; gap: 32px; } .voice__nav { display: flex; flex-wrap: wrap; gap: 16px 20px; } .voice__viewport { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; } .voice__cases { transform: none !important; /* JS が付与する transform を無効化 */ display: block; gap: 0; } .voice-case { display: none; height: auto; opacity: 1; grid-template-columns: 1fr; gap: 24px; } .voice-case.is-active { display: grid; } .voice-case__text { height: auto; overflow: visible; } .voice-case__img { height: auto; aspect-ratio: 4 / 3; order: -1; } .voice-case__name { font-size: 20px; } /* News モバイル: 4列 → 2列 */ .news { padding: 64px 0; } .news__head { margin-bottom: 32px; } .news__more { padding: 12px 40px; } .news__list { grid-template-columns: repeat(2, 1fr); gap: 16px 0; } .news-item { padding: 4px 16px 8px; } .news__list .news-item:nth-child(2n) { border-right: 1px solid var(--color-line); } .news__list .news-item:last-child { border-right: 1px solid var(--color-line); } /* Office Gallery モバイル: セル寸法を縮小、速度も少し早めに */ .gallery { padding: 64px 0 80px; } .gallery__track { --col-w: 160px; --row-h: 160px; --g-gap: 10px; animation-duration: 40s; } /* Contact モバイル */ .contact { padding: 64px 0 40px; } .contact::before { /* モバイル: padding-top 64 + タイトル(clamp の下限 48 〜 7vw) 半分 ≒ 90 */ top: 90px; } /* モバイル（contact が縦に長くなる）では dome の flat bottom (= 90px + 60vw) が footer 上端まで届かず、footer の白 dome が「切り取るグレー」が無くなって曲線が見えなくなる。dome 下端から contact 下端を 100px 越えるまでグレーを延長して、 footer 側 dome のカーブを成立させる */ .contact::after { content: ""; position: absolute; top: calc(90px + 60vw); bottom: -100px; left: 50%; transform: translateX(-50%); width: 200vw; background: #f3f1ec; z-index: -1; pointer-events: none; } .contact__title { margin-bottom: 40px; } .contact__hours { margin-bottom: 24px; } .contact__mail { padding: 14px 48px; } .site-footer { padding: 96px 0 32px; } .site-footer__logo-wrap { margin-bottom: 56px; } .site-footer__inner { grid-template-columns: 1fr; gap: 40px; } .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 0 32px; } .site-footer__nav ul { padding-left: 16px; } } @media (max-width: 560px) { :root { --gutter: 16px; } .rent__cards { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } .rent__circle { top: -60px; width: 120vw; right: -20vw; opacity: .75; } /* News 1列 */ .news__list { grid-template-columns: 1fr; } } /* ============================================================ Contact Form 7（お問い合わせフォーム） ※ CF7 が出力する form 要素自身（.wpcf7-form）をベースに当てる。ラッパー

はブロックエディタや SWELL の自動ラップで構造が変わって効かないことがあるため使わない。 ============================================================ */ .wpcf7 { max-width: 720px; margin: 0 auto; } .wpcf7-form { color: var(--color-text); } .cf7-item { margin-bottom: 32px; } .cf7-item > label, .cf7-item .cf7-label { display: block; font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 12px; letter-spacing: .02em; } .cf7-required { color: #c0392b; font-weight: 700; margin-left: 4px; } /* テキスト系入力 */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="url"], .wpcf7-form input[type="number"], .wpcf7-form textarea { width: 100%; padding: 12px 16px; font-size: 15px; font-family: var(--font-ja); line-height: 1.6; color: var(--color-text); background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .wpcf7-form input[type="text"]:focus, .wpcf7-form input[type="email"]:focus, .wpcf7-form input[type="tel"]:focus, .wpcf7-form input[type="url"]:focus, .wpcf7-form input[type="number"]:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--color-text-soft); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); } .wpcf7-form::placeholder { color: #c8c6c0; opacity: 1; } .wpcf7-form textarea { min-height: 180px; resize: vertical; } /* 郵便番号など短い入力 */ .cf7-item input[name="your-zip"] { max-width: 200px; } /* ラジオ（お問い合わせ項目、ご連絡方法） */ .wpcf7-form .wpcf7-radio, .wpcf7-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px 24px; } .wpcf7-form .wpcf7-list-item { margin: 0; } .wpcf7-form .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; color: var(--color-text); line-height: 1.6; } .wpcf7-form .wpcf7-list-item input[type="radio"], .wpcf7-form .wpcf7-list-item input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin: 0; border: 1px solid #b9b6ae; background: #fff; cursor: pointer; flex-shrink: 0; transition: border-color .2s ease, background .2s ease; } .wpcf7-form .wpcf7-list-item input[type="radio"] { border-radius: 50%; } .wpcf7-form .wpcf7-list-item input[type="checkbox"] { border-radius: 3px; } .wpcf7-form .wpcf7-list-item input[type="radio"]:checked { border-color: var(--color-dark); background: radial-gradient(circle, var(--color-dark) 40%, #fff 45%); } .wpcf7-form .wpcf7-list-item input[type="checkbox"]:checked { border-color: var(--color-dark); background: var(--color-dark); background-image: url("data:image/svg+xml;utf8,"); background-size: 14px 14px; background-position: center; background-repeat: no-repeat; } .wpcf7-form .wpcf7-list-item input[type="radio"]:focus-visible, .wpcf7-form .wpcf7-list-item input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-text-soft); outline-offset: 2px; } /* ラジオ use_label_element 時の構造調整 */ .wpcf7-form .wpcf7-list-item-label { font-weight: 400; } /* メールアドレス2カラム */ .cf7-email-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; } .cf7-email-col { display: flex; flex-direction: column; } .cf7-note { display: block; margin-top: 6px; font-size: 12px; color: var(--color-text-soft); letter-spacing: .02em; } /* 同意事項（acceptance） */ .wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; } .wpcf7-form .wpcf7-acceptance a { color: #2a6bb8; text-decoration: underline; } .wpcf7-form .wpcf7-acceptance a:hover { opacity: .75; } /* 送信ボタン */ .wpcf7-form .wpcf7-submit { display: inline-block; min-width: 160px; padding: 12px 32px; margin-top: 8px; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: #fff; background: #2a6bb8; border: 0; border-radius: var(--radius-sm); cursor: pointer; transition: background .2s ease, transform .2s ease, opacity .2s ease; -webkit-appearance: none; appearance: none; } .wpcf7-form .wpcf7-submit:hover { background: #235ea3; transform: translateY(-1px); } .wpcf7-form .wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* 送信中スピナー */ .wpcf7-form .wpcf7-spinner { vertical-align: middle; margin-left: 12px; } /* バリデーションエラー */ .wpcf7-form .wpcf7-not-valid { border-color: #c0392b !important; background: #fdf3f1; } .wpcf7-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 12px; color: #c0392b; } /* レスポンスメッセージ（送信完了・エラー） */ .wpcf7-form .wpcf7-response-output { margin: 24px 0 0; padding: 14px 18px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.6; } .wpcf7-form.sent .wpcf7-response-output { border: 1px solid #46a36e; background: #f0faf3; color: #1f6b3e; } .wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output, .wpcf7-form.aborted .wpcf7-response-output, .wpcf7-form.spam .wpcf7-response-output { border: 1px solid #c0392b; background: #fdf3f1; color: #a02a1f; } /* モバイル */ @media (max-width: 640px) { .cf7-item { margin-bottom: 24px; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form textarea { font-size: 16px; /* iOS のオートズーム抑止 */ } .cf7-email-row { grid-template-columns: 1fr; } .wpcf7-form .wpcf7-radio, .wpcf7-form .wpcf7-checkbox { flex-direction: column; gap: 10px; } .wpcf7-form .wpcf7-submit { width: 100%; } }