@charset "utf-8"; /* ------------------------------------------------------------ fullwidth.css — jkwilton.com 画面いっぱい表示用の上書きCSS デザイン（色・画像・文字・並び）は現行のまま、 「800px固定・中央寄せ」の幅制限だけを外します。 使い方: トップページの 内、top.css の読み込みより後に1行追加 ・PC表示（幅801px以上）のみ有効。スマホ表示（smart.css）には影響しません。 ・元に戻すときは上の1行を消すだけです。 ------------------------------------------------------------ */ @media screen and (min-width: 801px) { /* 画面端の余白（画面幅に応じて少しだけ広がる） */ :root { --fw-gutter: max(2vw, 25px); } /* ----- ヘッダー ----- */ #header { width: auto; margin: 0; padding: 0 var(--fw-gutter) 5px 0; box-sizing: border-box; } #header h1 { padding-left: var(--fw-gutter); } /* ----- グローバルナビ（画像スプライトはそのまま、帯だけ全幅） ----- */ #global-navi { width: auto; margin: 0; display: flex; justify-content: flex-start; background: #fff; box-sizing: border-box; } #global-navi li { float: none; flex: 0 0 auto; } /* ----- コンテンツ全体：左（本文）は可変、右（サブ）は固定幅 ----- */ #contents { width: auto; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: clamp(20px, 2.5vw, 48px); padding: 0 var(--fw-gutter); box-sizing: border-box; } #home-visual { grid-column: 1 / -1; width: auto; margin: 0 calc(-1 * var(--fw-gutter)); /* ビジュアルは左右端まで */ } #home-main, #home-sub { float: none; width: auto; margin: 15px 0 0; min-width: 0; } #home-sub { overflow: hidden; } #manager { grid-column: 1 / -1; } /* ----- トップのビジュアル（メニュー＋バナー） ----- */ /* スライドショーを全幅の背景にし、ボタン群をその上に重ねる */ #topMenu .bg { left: 175px !important; right: 0 !important; width: auto !important; display: block; } #topBannerSwiper { width: 100% !important; } /* 重ねるボタン群：半透明の白パネル＋影で、どの写真の上でも読めるようにする */ #topMenu .cta { position: absolute; z-index: 5; top: 8px; right: 12px; bottom: 8px; width: 232px; box-sizing: border-box; padding: 8px 6px; background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border-radius: 6px; box-shadow: 0 2px 14px rgba(0,0,0,.3); display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; } #topMenu .cta a { display: block; line-height: 0; } #topMenu .cta img { width: 214px; max-width: 100%; height: auto; display: block; } #topMenu .cta .cta-pw { margin: 0; padding: 3px 6px; background: rgba(255,255,255,.88); border-radius: 3px; font-size: 11px; line-height: 1; white-space: nowrap; } #topMenu .cta .cta-pw a { display: inline; color: #a04500; font-weight: bold; line-height: 1; text-decoration: none; } /* パネルと重ならないよう、キャプション・ページ送りを左側へ */ #topBannerSwiper .slide-text { padding-right: 268px !important; } #topBannerSwiper .slide-caption { right: auto !important; left: 12px !important; } #topBannerSwiper .swiper-pagination { right: auto !important; left: 16px !important; bottom: 6px !important; } /* 右カラム側の同ボタンはPCでは非表示（重複回避）。スマホ表示は従来通り */ #home-sub .bt-b { display: none; } #topMenu .subBg { width: calc(100% - 20px); } #topMenu ul.sub { width: calc(100% - 175px); } /* ----- 見出しバー・本文内の固定幅 ----- */ #home-main h3, #home-sub h3 { background-size: 100% 100%; } #media-activity { display: flow-root; } div#media-activity p.full-size { width: auto; } /* ----- アメリカ不動産ボックス ----- */ #america-estate { width: 100%; } #america-estate li { width: auto; right: 0; box-sizing: border-box; } #america-estate li img { width: 220px !important; height: 112px !important; max-width: 100%; padding-left: 0 !important; margin-left: auto; margin-right: auto; object-fit: cover; } /* ----- フッター ----- */ #footer { width: auto; margin: 0; } } /* CTAボタン群はPC表示のみ（スマホでは従来の右カラムを使用） */ #topMenu .cta { display: none; } @media screen and (min-width: 801px) { #topMenu .cta { display: flex; } } /* ===== 迫力アップ：スライドを上下に拡大し、左メニューをスライド上に浮かせる（PCのみ） ===== */ @media screen and (min-width: 801px) { #home-visual { height: 400px; } /* 160px → 400px */ #topMenu { height: 400px; } #topMenu .bg { left: 0 !important; top: 0; height: 400px !important; } /* スライドを左端から全幅へ */ #topBannerSwiper, #topBannerSwiper .swiper-slide { height: 400px !important; } /* 写真ごとに表示位置を調整（元写真の全体を使い、塔・ヤシの先端が見えるように） */ #topBannerSwiper .swiper-slide img { object-position: 50% 0% !important; } #topBannerSwiper .swiper-slide img[src*="1742626301229"] { object-position: 50% 28% !important; } /* チューリッヒ：塔の先端〜時計 */ #topBannerSwiper .swiper-slide img[src*="1599173704727"] { object-position: 50% 14% !important; } /* 東京タワー：先端が見える */ #topBannerSwiper .swiper-slide img[src*="1542259009477"] { object-position: 50% 45% !important; } /* マウイ：ヤシの先端が見える */ /* 左メニュー：半透明パネルとしてスライドの上に浮かせる */ /* ※ transform / backdrop-filter / overflow:hidden は使わない（子のサブメニューの基準位置が変わり、文言が消えるため） */ #topMenu > ul:not(.sub) { position: absolute; z-index: 6; top: 104px; left: 14px; width: 175px; margin: 0; padding: 0; /* 104px = (スライド高400 − メニュー高192) ÷ 2 */ background: rgba(24, 62, 58, .72); border-radius: 8px; box-shadow: 0 0 18px rgba(255,255,255,.38), 0 0 3px rgba(255,255,255,.5); /* 薄い白のシャドー */ } #topMenu > ul:not(.sub) > li.hd:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; } #topMenu > ul:not(.sub) > li.hd:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } #topMenu > ul:not(.sub) li.hd { height: 32px; line-height: 31px; } /* 右のボタン群：コンパクト（内容の高さだけ） */ #topMenu .cta { top: 50%; bottom: auto; transform: translateY(-50%); height: auto; justify-content: flex-start; gap: 6px; } /* サブメニュー（ホバー時の説明文）：基準がメニュー本体に変わったため位置を補正（スライド上の x=197px・上10px から全高） */ #topMenu ul.sub { left: 183px; top: -94px; width: 600px; height: 400px; } #topMenu .subBg { left: 197px; top: 10px; height: 380px; width: calc(100% - 209px); } /* スライドの文言：左メニューの右側に、見出し＋説明の2段で配置（ページ送りは下中央） */ #topBannerSwiper .slide-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 4px; padding: 0 268px 40px 207px !important; box-sizing: border-box; } #topBannerSwiper .slide-text h2 { order: 1 !important; margin: 0 !important; font-size: 26px !important; line-height: 1.25 !important; letter-spacing: .06em; } #topBannerSwiper .slide-text p { order: 2 !important; margin: 0 !important; font-size: 13px !important; line-height: 1.4 !important; } /* キャプション・ページ送りは左メニューと重ならない位置へ */ #topBannerSwiper .slide-caption { left: 207px !important; } #topBannerSwiper .swiper-pagination { left: 0 !important; right: 0 !important; width: 100% !important; bottom: 14px !important; text-align: center; } /* ページ送りは下中央 */ } /* ===== 小さめのPC画面（801〜1000px）：ボタン群と文言を少し小さくして収める ===== */ @media screen and (min-width: 801px) and (max-width: 1000px) { #topMenu .cta { width: 200px; right: 8px; } #topMenu .cta img { width: 182px; } #topMenu .cta .cta-pw { font-size: 10px; padding: 3px 4px; } #topBannerSwiper .slide-text { padding-right: 224px !important; } #topBannerSwiper .slide-text h2 { font-size: 21px !important; } } /* ===== スライド写真を明るく（PC表示）：写真自体を少し持ち上げ、下の暗いグラデーションも弱める ===== */ @media screen and (min-width: 801px) { #topBannerSwiper .swiper-slide img.slide-bg { filter: brightness(1.2) contrast(1.03) saturate(1.06); } #topBannerSwiper .slide-overlay { background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 45%, rgba(0,0,0,0) 100%) !important; } } /* ===== 仕上げ調整 ===== */ @media screen and (min-width: 801px) { /* 左メニューにホバーして説明文を出している間は、写真左上の英語キャプションを消す（重なり防止） */ #topBannerSwiper .slide-caption { transition: opacity .2s; } #home-visual.show #topBannerSwiper .slide-caption { opacity: 0; } /* 見出しを少し下げ、写真の被写体（塔・ヤシ）にかかりにくくする */ #topBannerSwiper .slide-text { padding-bottom: 30px !important; } }