/** * 2026.08.20 トップページ改修 用 追加スタイル * 既存の style.css を尊重しつつ、以下を上書き/追加: * - Swiper 構造導入に伴う .swiper-wrapper 内のリスト調整 * - 前へ/次へボタンの基本スタイル * - 新規セクション home_products のプレースホルダー * - KV の縦幅微調整 */ /* ================================ 1. Swiper: 既存 div.items ul / li のスタイルを上書き (既存 CSS の flex-wrap:wrap と width:calc(25%-20px) を打ち消す) ================================ */ .home-slider .swiper { overflow: hidden; width: 100%; /* カードの box-shadow (rgba(0,0,0,0.12) 0.75rem blur) が overflow: hidden で クリップされて右下・左下の角の影が見切れる問題への対応。 上下左右に 15px の内側余白を作って影の広がり分を吸収させる。 */ padding: 15px; box-sizing: border-box; } /* 既存 div.items ul / #home_styles ul を強制上書き */ .home-slider .swiper > .swiper-wrapper, div.items .home-slider .swiper-wrapper, #home_styles .swiper-wrapper { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-wrap: nowrap !important; } /* Swiper が JS で width と margin-right (spaceBetween) をインラインで付与するので、 外部 CSS では width も margin も !important で上書きしない。 */ .home-slider .swiper-slide, .home-slider .swiper-wrapper > li.swiper-slide, #home_styles .swiper-wrapper > li.swiper-slide { margin: 0; /* Swiper が margin-right をインラインで上書きするので OK */ box-sizing: border-box; flex-shrink: 0; /* Swiper 標準 CSS の .swiper-slide { height: 100% } を上書きして auto に。 これで align-items: stretch が効き、最も高いカードに揃う。 */ height: auto !important; } /* Swiper wrapper で明示的に stretch を指定 (念のため / 標準デフォルト保険) */ .home-slider .swiper-wrapper { align-items: stretch !important; } /* 各カードの を親スライドいっぱいに広げて、文字量差による高さ違いをなくす。 #home_style / #home_interview / #home_column は既存 div.items 系 CSS が 効かないため、明示的に flex column で anchor を伸ばす。 */ #home_style .home-slider .swiper-slide, #home_condos .home-slider .swiper-slide, #home_interview .home-slider .swiper-slide, #home_column .home-slider .swiper-slide { display: flex; flex-direction: column; } #home_style .home-slider .swiper-slide > a, #home_condos .home-slider .swiper-slide > a, #home_interview .home-slider .swiper-slide > a, #home_column .home-slider .swiper-slide > a { flex: 1 0 auto; /* スライド高さいっぱい */ } /* -------------------------------- カード全体のデザイン Rooms は既存 div.items CSS が良い感じに効いてるので触らず、 他 3 セクション (by style / Interview / OLS Journal) に Rooms 風のカードデザインを適用する -------------------------------- */ /* カードの下側の余白 + 角丸 (全 4 スライダー共通) 既存 div.items li a は height:100% で伸びるが padding-bottom がなく、 meta テキストが card 底面に張り付くのを解消。 角丸は 8px（既存の他のカード radius 0.5rem 相当）で統一。 */ #home_rooms .home-slider .swiper-slide a, #home_style .home-slider .swiper-slide a, #home_condos .home-slider .swiper-slide a, #home_interview .home-slider .swiper-slide a, #home_column .home-slider .swiper-slide a { padding-bottom: 1.5rem; box-sizing: border-box; border-radius: 8px; } /* リンク領域 — by style / Interview / OLS Journal を Rooms と完全一致させる Rooms は既存 div.items li a に box-shadow, overflow, transition が設定されているので 同じスタイルを明示的に指定 */ #home_style .home-slider .swiper-slide a, #home_condos .home-slider .swiper-slide a, #home_interview .home-slider .swiper-slide a, #home_column .home-slider .swiper-slide a { display: block; height: 100%; margin: 0; /* 既存 #home_styles li a { margin: 0 10px } を打ち消し */ color: inherit; text-decoration: none; background-color: rgba(255, 255, 255, 1); overflow: hidden; box-shadow: 0px 0px 0.75rem rgba(0, 0, 0, 0.12); /* Rooms と同じ */ } /* ============================================================ 全 4 スライダー共通のホバー効果 (Things for a richer stay と同じ) ・カード全体が 3px 浮き上がる ・影が濃くなる ・画像が微かにズームイン Rooms は既存 div.items li a に transition/hover が設定されているため、 競合しないよう transform/box-shadow のみ追加。 既存の hover 黄色ハイライトは維持する。 ============================================================ */ #home_rooms .home-slider .swiper-slide a, #home_style .home-slider .swiper-slide a, #home_condos .home-slider .swiper-slide a, #home_interview .home-slider .swiper-slide a, #home_column .home-slider .swiper-slide a { transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.35s ease; } #home_rooms .home-slider .swiper-slide a:hover, #home_style .home-slider .swiper-slide a:hover, #home_condos .home-slider .swiper-slide a:hover, #home_interview .home-slider .swiper-slide a:hover, #home_column .home-slider .swiper-slide a:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); transform: translateY(-3px); background-color: rgba(255, 255, 255, 1); /* by style/Interview/OLS Journal は白のまま */ } /* Rooms のみ既存の黄色ハイライトを維持 */ #home_rooms .home-slider .swiper-slide a:hover { background-color: rgba(255, 192, 0, 0.1); } /* サムネイル画像のズームイン */ #home_rooms .home-slider .swiper-slide .thumb img, #home_style .home-slider .swiper-slide .thumb img, #home_condos .home-slider .swiper-slide .thumb img, #home_interview .home-slider .swiper-slide .thumb img, #home_column .home-slider .swiper-slide .thumb img { transition: transform 0.4s ease, opacity 0.4s ease; } #home_rooms .home-slider .swiper-slide a:hover .thumb img, #home_style .home-slider .swiper-slide a:hover .thumb img, #home_condos .home-slider .swiper-slide a:hover .thumb img, #home_interview .home-slider .swiper-slide a:hover .thumb img, #home_column .home-slider .swiper-slide a:hover .thumb img { transform: scale(1.03); opacity: 1; /* 既存 a:hover img { opacity: 0.8 } を打ち消し */ } /* Recommended by style の hover 時のアンダーラインを打ち消し (既存 CSS: #home_styles a:hover span.title { text-decoration: underline }) 他のカードと同じく下線なしに揃える */ #home_rooms .home-slider .swiper-slide a:hover .title, #home_style .home-slider .swiper-slide a:hover .title, #home_condos .home-slider .swiper-slide a:hover .title, #home_interview .home-slider .swiper-slide a:hover .title, #home_column .home-slider .swiper-slide a:hover .title { text-decoration: none; } /* サムネイル画像（1.5:1 比率、コンテナ幅いっぱい） */ #home_style .home-slider .swiper-slide .thumb, #home_condos .home-slider .swiper-slide .thumb, #home_interview .home-slider .swiper-slide .thumb, #home_column .home-slider .swiper-slide .thumb { display: block; margin: 0; background-color: #fff; font-size: 0; overflow: hidden; } #home_style .home-slider .swiper-slide .thumb img, #home_condos .home-slider .swiper-slide .thumb img, #home_interview .home-slider .swiper-slide .thumb img, #home_column .home-slider .swiper-slide .thumb img { width: 100%; height: auto; aspect-ratio: 1.5 / 1; object-fit: cover; display: block; } /* タイトル余白 */ #home_style .home-slider .swiper-slide .title, #home_condos .home-slider .swiper-slide .title, #home_interview .home-slider .swiper-slide .title, #home_column .home-slider .swiper-slide .title { display: block; margin: 1.2rem 1rem 1.2rem; line-height: 1.4; text-align: left; } /* ================================ 2. 前へ / 次へボタン 既存グローバル `button { padding: 1.35em 2em }` が効いてボタンが 縦につぶれるため、padding: 0 で打ち消して正円化。 ================================ */ .home-slider { position: relative; } .home-slider-prev, .home-slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; padding: 0; /* 既存 button の padding 1.35em 2em を打ち消し */ border: none; border-radius: 50%; background: rgba(1, 53, 115, 1); /* サイト共通の紺色 (#header と同じ) */ color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease; box-sizing: border-box; } .home-slider-prev:hover, .home-slider-next:hover { background: rgba(1, 53, 115, 0.7); /* 同色の透過版 */ } .home-slider-prev { left: -12px; } .home-slider-next { right: -12px; } /* Swiper が「これ以上進めない」時にボタンをフェード */ .home-slider-prev.swiper-button-disabled, .home-slider-next.swiper-button-disabled { opacity: 0.25; cursor: not-allowed; } /* ================================ 3. home_products (暮らしを豊かにするもの) 左: リード文 / 右: 商品3カラムグリッド の2カラムレイアウト セクション背景色 #efece5 (薄いベージュ) ================================ */ #home_products { background-color: #FFFCF4; } /* 全体レイアウト: 左リード + 右グリッド */ #home_products .products_layout { display: grid; grid-template-columns: 1fr 3fr; /* リード 25%, カード群 75% */ gap: 40px; align-items: start; margin: 2rem 5% 0; } #home_products .products_lead { padding: 1rem 0; } #home_products .products_lead p { margin: 0; line-height: 1.9; } /* カード群 (Swiper) */ #home_products .products_grid { min-width: 0; /* grid child overflow 対策 */ } /* Swiper の slide は a.product が中身なので、slide 自体は透明で、 ホバー効果は a.product が担当 */ #home_products .swiper-slide { height: auto; display: flex; } #home_products .swiper-slide > a.product { width: 100%; } /* 個別カード (a 要素として全体クリッカブル) */ #home_products a.product { background-color: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease; } #home_products a.product:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); transform: translateY(-3px); color: inherit; text-decoration: none; } #home_products a.product:hover .product_img img { transform: scale(1.03); } #home_products .product_img img { transition: transform 0.4s ease; } #home_products .product_img { width: 100%; overflow: hidden; } #home_products .product_img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; } #home_products .product_info { padding: 1.25rem 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; } #home_products .product_info h3 { margin: 0 0 0.75rem; font-size: 1.05rem; font-weight: 600; line-height: 1.4; } #home_products .product_info p { margin: 0; line-height: 1.6; font-size: 0.9rem; } #home_products .product_info .desc { color: #555; flex: 1; /* 説明文が伸びて価格を下に押しやる */ } #home_products .product_info .price { margin-top: 1rem; font-weight: bold; font-size: 1rem; color: #222; } /* モバイル: 上下 1 カラム、カード群も 1カラム縦積み */ @media (max-width: 768px) { #home_products .products_layout { grid-template-columns: 1fr; /* 縦積み */ gap: 24px; margin: 1.5rem 5% 0; } #home_products .products_grid { grid-template-columns: 1fr; /* カードも縦積み */ gap: 16px; } #home_products .product_img img { aspect-ratio: 16 / 9; } } /* ================================ 4. Interview セクション Swiper 化により Recommended by style と同じ挙動になったので、 共通の .home-slider スタイル (セクション 1-2) がそのまま適用される。 セクション背景色のみ追加（薄い緑白）。 ================================ */ #home_interview { background-color: rgba(244, 249, 248, 1); } /* ================================ 5. KV 縦幅 (ハイブリッド: vh + min/max px) 前 min-height:60vh から半減 → 30vh をベースに、 極端に縦短い/長い viewport でも安定するよう min/max で挟む。 段階2 でカンプ確定時に最終値に調整。 注: 既存 CSS で #home_hero_slides { height:100vh } があるため、親を縮めても子が 100vh のままはみ出す。 overflow:hidden でクリップ + 子を height:100% で親に追従させる。 */ #home_hero { /* 2026.10.16：画面の高さいっぱいに変更（旧 50vh / min 320px / max 600px）。 固定ヘッダーの分（body.home の padding-top：PC 110px / 1024px 以下 80px）を引いて、 最初の 1 画面にぴったり収める。svh はスマホのアドレスバー表示時の高さで、 スクロールでバーが出入りしても KV の高さが変わらない（非対応ブラウザは前行の vh を使う）。 */ /* 2026.10.21：ヘッダーを KV の上に出さなくなったので、固定ヘッダー分を引かず画面の高さそのものに */ height: 100vh; height: 100svh; min-height: 320px; /* 縦短い viewport (スマホ横向き等) の最低ライン */ overflow: hidden; } #home_hero_slides { height: 100% !important; /* 親 (#home_hero) に追従、既存 100vh を打ち消し */ } /* ================================ 5.4 ヘッダー / ナビがコンテンツに被る問題 修正 既存 style.css の #header { z-index: 2 } および #navi { z-index: 1 } では Swiper のスタッキングコンテキスト (.swiper { position: relative; z-index: 1 }) と衝突し、 カードがナビの上に来てしまう。 階層設計: - #header: 1001 (ロゴを含む、最上位に配置) - #navi: 1000 (紺色の背景バー、#header の下) - #navi h1: 1002 (モバイルのハンバーガー、常に最上位) Why: - デスクトップは #navi が全幅背景で #header と重なるため、 元の z-index (header=2, navi=1) と同じ「header が上」の順序を維持。 - モバイルは #navi 自体は position がないので z-index 効かないが、 ハンバーガー (#navi h1) は position:fixed で単独動作、 #header より上に置く必要あり。 */ #header { z-index: 1001 !important; } #navi { z-index: 1000 !important; } #navi h1 { z-index: 1002 !important; /* モバイルのハンバーガーを #header の上に */ } /* 2026.08.20〜2026.10.16 はここで body.hero でも header/navi を隠さないよう打ち消していたが、 2026.10.21 に削除（ユーザー指示：KV を通過してからヘッダーを表示する）。 style.css 本来の動き（body.hero の間は PC：紺のメニューバーを上へ隠しロゴを消す／ 1024px 以下：ヘッダーとハンバーガーを上へ隠す）に戻る。 body.hero の付け外しは js/home.js（KV の下端がヘッダーの線を越えたら外れる） */ /* ただし 1024px 以下のハンバーガー（☰）だけは KV の上でも出しておく（2026.10.21 ユーザー指示）。 style.css の body.hero #navi h1 { top: -40px } を打ち消して通常位置（20px／管理バー表示時 52px）に。 紺のヘッダーが無い写真の上に乗るので、白いアイコンが沈まないよう薄い影を付ける */ @media only screen and (max-width: 1024px) { body.hero #navi h1 { top: 20px; filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.45)); } body.admin-bar.hero #navi h1 { top: 52px; } /* KV の上で ☰ からメニューを開いたときは、ふだんどおり紺のヘッダー（ロゴ＋✕）を出す。 出さないとメニューの上の帯に写真が透けて見える */ body.hero.mobile_menu #header { top: 0; } body.admin-bar.hero.mobile_menu #header { top: 32px; } body.hero.mobile_menu #navi h1 { filter: none; } } /* KV の上でもロゴだけは出しておく（2026.10.27 ユーザー指示）。 紺のバーは隠したまま、写真の上に白いロゴを乗せる（影は付けない：2026.10.27 ユーザー指示）。 PC：style.css の body.hero #header h1 a { visibility:hidden; opacity:0 } を打ち消す。 1024px 以下：style.css の body.hero #header { top:-80px } を打ち消し、 ヘッダーは定位置のまま背景だけ透明にする（スクロールで KV を抜けると紺に戻る） */ body.hero #header h1 a { visibility: visible; opacity: 1; } @media only screen and (max-width: 1024px) { body.hero #header { top: 0; background-color: transparent; } body.admin-bar.hero #header { top: 32px; } /* メニューを開いたときは紺のヘッダーに戻す */ body.hero.mobile_menu #header { background-color: rgba(1, 53, 115, 1); } } /* モバイルメニュー展開時、#navi div.content (ドロワー) が Swiper カードに 埋もれる問題対応。既存 CSS で z-index: 1 (Swiper と同順位) だったのを 999 に押し上げて、カードより確実に上に表示。 */ @media (max-width: 1024px) { #navi div.content { z-index: 999 !important; } } /* body.home の padding-top を復活させて、fixed ヘッダー/ナビが KV に被らないように 既存 CSS: body { padding: 110px 0 0 } (base) body.home { padding-top: 0 } (ホームだけ 0 に上書き → KV 全画面用) ヘッダー常時表示に切り替えたので、この打ち消しを更に打ち消して余白復活 */ /* 2026.10.21：ヘッダーを KV 通過後に出すようにしたので、上余白の復活はやめる （style.css の body.home { padding-top: 0 } のまま。KV は画面の一番上から始まる） */ /* ================================ 5.5 モバイルで Rooms の anchor 高さが崩れる問題 修正 既存 style.css 内、@media max-width:768px の div.items li a { height:initial } がモバイル時のみ anchor 高さを解除してしまい、カードの底辺が揃わない現象への対策。 my rule (specificity 0,1,2,1) が既存 (0,0,1,3) に勝つ。 */ @media (max-width: 768px) { #home_rooms .home-slider .swiper-slide a { height: 100%; } } /* ================================ 6. モバイル対応 (640px 未満) ================================ */ @media (max-width: 639px) { .home-slider-prev, .home-slider-next { width: 32px; height: 32px; font-size: 18px; } /* デスクトップの left/right: -12px のままだとボタンが画面の外へ 12px はみ出して 見切れるため、SP では画面内に収める (2026.09.12 追記) */ .home-slider-prev { left: 4px; } .home-slider-next { right: 4px; } #home_products .items.products ul, #home_interview .items.interviews ul { grid-template-columns: repeat(2, 1fr); gap: 12px; } } /* ================================ 7. フローティング LINE 友達追加ボタン (2026.08.25 追加 / 2026.09.08 でピル型に復帰) ================================ */ #floating-line { position: fixed; right: 20px; bottom: 20px; z-index: 900; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px 12px 16px; background-color: #06C755; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, bottom 0.3s ease; } #floating-line svg { width: 26px; height: 26px; flex-shrink: 0; } #floating-line:hover { background-color: #05a648; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); text-decoration: none; } @media (max-width: 639px) { #floating-line { right: 12px; bottom: 12px; padding: 10px 16px 10px 12px; font-size: 13px; } #floating-line svg { width: 22px; height: 22px; } } /* ================================ 8a. Swiper 4セクションの見出し下 余白追加 (2026.08.25) ================================ */ #home_rooms .content > h1, #home_style .content > h1, #home_interview .content > h1, #home_column .content > h1 { margin-bottom: 20px; } /* ================================ 8b. セクション見出しの文字サイズ統一 (2026.09.08) en を控えめに、ja を主役にする ※ #home_traveler は導入ブロックのため対象外 ================================ */ #home_rooms .content > h1 .en, #home_style .content > h1 .en, #home_condos .content > h1 .en, #home_products .content > h1 .en, #home_interview .content > h1 .en, #home_column .content > h1 .en { font-size: 1.2rem; } #home_rooms .content > h1 .ja, #home_style .content > h1 .ja, #home_condos .content > h1 .ja, #home_products .content > h1 .ja, #home_interview .content > h1 .ja, #home_column .content > h1 .ja { font-size: 1.5rem; } /* ================================ 8. SP用: 空室問い合わせボタン (2026.08.25 追加) 2026.10.16 から、ページを開いた時点で表示する（旧：KV 通過後にフェードイン）。 body.hero（home.js の IntersectionObserver が付け外し）はヘッダー表示の制御に残っているが、 このボタンでは使わなくなった。 ================================ */ @media only screen and (min-width: 769px) { body.home #sp_fixed_inquiry {display: none;} } @media only screen and (max-width: 768px) { body.home #sp_fixed_inquiry { display: block; position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 100; } /* 固定ボタンと同じものが KV 内にも出て 2 つ並ぶので、SP では KV 内の方を隠す（2026.10.16） */ body.home #home_hero_message p.hero-btn { display: none; } body.home #sp_fixed_inquiry a.btn.b { margin: 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } /* 空室ボタンが常に出るので、LINE ボタン（現在は非表示）も常に上へずらして重なりを回避 */ body.home #floating-line { bottom: 80px; } } /* 9. Recommended Condo「詳しくはこちら」ボタン (2026.09.09) — 2026.09.30 でカード型に変更したため削除 */ /* ================================ 10. OLS Journal「一覧」ボタン (2026.09.09) body.home を足して style.css (後読み) より詳細度を上げている。 ================================ */ /* デスクトップ: センター配置 (既存の text-align: right を上書き) */ @media only screen and (min-width: 769px) { body.home #home_column div.index { text-align: center; } } /* SP: 横幅 100% */ @media only screen and (max-width: 768px) { body.home #home_column div.index a.btn { display: block; width: 100%; } } /* 11. For Travelers のボタン (2026.09.09) — 2026.10.16 でボタンを home_rooms へ移したため削除（18 章） */ /* ============================================================================ 12. 文字サイズ・行間・コントラスト調整 (2026.09.12) 本文・カード内文字の拡大 / 行間調整 / 薄い文字色のコントラスト改善。 ※ セクション見出し (en/ja) は対象外。 ※ 2026.09.12 時点では style.css が後読みだったため詳細度を上げてある（2026.09.30 以降は不要）。 ============================================================================ */ /* --- 1. For Travelers 本文 --- 2026.10.16 でセクションごと削除 */ /* --- 2. おすすめのお部屋 カード --- 面積・定員・エリアはサイズが既に依頼範囲(14px)だったため、 主因だった文字色のコントラストを 2.96:1 → 5.74:1 に引き上げる。 */ #home_rooms .home-slider .swiper-slide .title { font-size: 18px; line-height: 1.5; } #home_rooms .home-slider .swiper-slide .rent { font-size: 20px; line-height: 1.4; } #home_rooms .home-slider .swiper-slide .meta, #home_rooms .home-slider .swiper-slide .square, #home_rooms .home-slider .swiper-slide .capacity, #home_rooms .home-slider .swiper-slide .areas, #home_rooms .home-slider .swiper-slide .area { font-size: 15px; line-height: 1.6; color: rgba(102, 102, 102, 1); /* #666 — WCAG AA 4.5:1 を満たす */ } /* --- 3. 滞在スタイル (Find Your Stay) 記事タイトル --- 太さは実測で既に 600 (Semibold)。サイズと行間を引き上げ、 タイトルが長い記事が増えても崩れないよう 3 行でクランプする。 */ #home_style .home-slider .swiper-slide .title, #home_condos .home-slider .swiper-slide .title { font-size: 18px; line-height: 1.55; font-weight: 600; } /* --- 4. 人気のコンドミニアム --- 2026.09.30 でカード型に変更したため削除（15 章を参照） */ /* --- 5. 利用者インタビュー (Guest Stories) 記事タイトル --- */ #home_interview .home-slider .swiper-slide .title { font-size: 18px; line-height: 1.55; } /* --- 6. OLS Journal 記事タイトル --- */ #home_column .home-slider .swiper-slide .title { font-size: 18px; line-height: 1.55; } /* --- 3/5/6 共通: 記事タイトルを最大 3 行でクランプ --- 拡大により行数が増えてもカード高さが破綻しないようにする。 超過分は末尾が「…」になる。 */ #home_style .home-slider .swiper-slide .title, #home_condos .home-slider .swiper-slide .title, #home_interview .home-slider .swiper-slide .title, #home_column .home-slider .swiper-slide .title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* --- 7. 暮らしを豊かに (Enrich Your Stay) 商品情報 --- 商品名 / 説明 / 価格 の情報差を明確にする。 */ #home_products .product_info h3 { font-size: 19px; line-height: 1.4; } #home_products .product_info .desc { font-size: 16px; line-height: 1.7; } #home_products .product_info .price { font-size: 21px; line-height: 1.4; } /* 13. おすすめのお部屋 テキストリンク (2026.09.12) — 2026.10.16 でテキストリンクを削除したため削除 */ /* ================================ 14. KV「空室を探す」ボタン (2026.09.26) 色はフロートの「空室を探す」と同じ a.btn.b（オレンジ #FF9200）を HTML 側でクラス付与して共有。ここではサイズだけ少し大きくする。 style.css が本ファイルより後に読まれるため #home_hero_message で詳細度を上げる。 ================================ */ body.home #home_hero_message p a.btn { font-size: 18px; padding: 18px 80px; } @media only screen and (max-width: 768px) { body.home #home_hero_message p a.btn { font-size: 17px; padding: 16px 36px; } } /* ================================ 15. Recommended Condo をカード型スライダーに (2026.09.30) Recommended Room / Find Your Stay と同じ .home-slider カード。 カード本体の共通スタイルは 1 章・12 章の #home_style と同じ指定に #home_condos を並べてある。 ここでは condo 固有の部分（セクション背景・エリア・説明文）だけ書く。 ※ 2026.09.30 から本ファイルは style.css の後に読まれるので、詳細度の水増しは不要。 ================================ */ /* style.css の紺の背景画像＋白文字をやめ、上の 2 セクションと同じ白背景に */ #home_condos { background: none; color: inherit; } #home_condos .content > h1 { margin-bottom: 20px; } /* エリア（Recommended Room の面積・定員と同じトーン） */ #home_condos .home-slider .swiper-slide .area { display: block; margin: -0.6rem 1rem 0.6rem; font-size: 15px; line-height: 1.6; color: rgba(102, 102, 102, 1); } /* 説明文 */ #home_condos .home-slider .swiper-slide .desc { display: block; margin: 0 1rem; font-size: 15px; line-height: 1.7; color: rgba(68, 68, 68, 1); } /* ================================ 16. MAPから探す (2026.09.30) 地図本体は page-map.php と共用の mod-gmap-all-bldg.php（#gmap のスタイルは style.css）。 見出しは他セクションと同じ en 1.2rem / ja 1.5rem。 ================================ */ #home_map .content > h1 { margin-bottom: 20px; } #home_map .content > h1 .en { font-size: 1.2rem; } #home_map .content > h1 .ja { font-size: 1.5rem; } /* ================================ 17. セクション上下の余白を 2rem に (2026.09.30) style.css は PC 4rem / 768px 以下 3rem。本ファイルが style.css の後に読まれるので 同じセレクタで全幅まとめて上書きできる。 #home_traveler は style.css 側に個別指定（詳細度が高い）があるので対象外のまま。 ================================ */ body.home section div.content { padding: 2rem 0; } /* ================================ 18. おすすめのお部屋：「ご利用ガイド」「建物一覧」ボタン (2026.10.16) For Travelers から移設。（当初は一覧テキストリンクの上に置いたが、テキストリンクは同日削除） 見た目は OLS Journal の「沖縄滞在のヒントを見る」と同じ。 PC は横並びセンター、768px 以下は縦積みで横幅いっぱい（OLS Journal の SP と同じ）。 ================================ */ #home_rooms div.index .index-btns { display: flex; justify-content: center; gap: 1rem; margin: 20px 10px 0; /* カードとの間に 20px（2026.10.16 ユーザー指示） */ } #home_rooms div.index .index-btns a.btn { margin: 0; padding: 0.8em 1em; font-size: 14px; /* 親の一覧リンク（16px）を継承しないよう OLS Journal と同じ 14px に固定 */ line-height: 1; font-weight: normal; color: rgba(80, 80, 80, 1); background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(80, 80, 80, 1); } #home_rooms div.index .index-btns a.btn:hover { background-color: rgba(244, 222, 156, 0.66); } @media only screen and (max-width: 768px) { #home_rooms div.index .index-btns { flex-direction: column; gap: 0.75rem; margin: 20px 5% 0; } #home_rooms div.index .index-btns a.btn { display: block; width: 100%; } } /* ================================ 19. Find Your Stay「一覧へ」／Recommended Condo「建物一覧へ」／Guest Stories「インタビュー一覧へ」ボタン (2026.10.16) 遷移先は特集一覧 /feature・建物一覧 /buildings・インタビュー一覧 /interview。見た目と配置は OLS Journal の「沖縄滞在のヒントを見る」と同じ （PC センター／768px 以下は横幅いっぱい）。 ================================ */ #home_style div.index, #home_condos div.index, #home_interview div.index, #home_column div.index { /* OLS Journal は既存ボタン。余白だけ揃える（2026.10.16 ユーザー指示） */ margin: 20px 10px 0; /* カードとの間に 20px（2026.10.16 ユーザー指示） */ text-align: center; } #home_style div.index a.btn, #home_condos div.index a.btn, #home_interview div.index a.btn { padding: 0.8em 1em; font-size: 14px; line-height: 1; font-weight: normal; color: rgba(80, 80, 80, 1); background-color: rgba(255, 255, 255, 1); border: 1px solid rgba(80, 80, 80, 1); } #home_style div.index a.btn:hover, #home_condos div.index a.btn:hover, #home_interview div.index a.btn:hover { background-color: rgba(244, 222, 156, 0.66); } @media only screen and (max-width: 768px) { #home_style div.index, #home_condos div.index, #home_interview div.index, #home_column div.index { margin: 20px 5% 0; } #home_style div.index a.btn, #home_condos div.index a.btn, #home_interview div.index a.btn { display: block; width: 100%; } } /* ================================ 20. おすすめのお部屋 見出し上のリード文 (2026.10.16) ================================ */ #home_rooms .content > p.lead { margin: 0 10px 1.5rem; font-size: 20px; line-height: 1.8; text-align: center; } @media only screen and (max-width: 768px) { #home_rooms .content > p.lead { margin: 0 5% 1.25rem; font-size: 17px; } } /* ================================ 21. MAPから探す 見出し下の説明文 (2026.10.16) 見出しの下・地図の上。本文サイズ（16px）でセンター。 ================================ */ #home_map .content > p.lead { margin: 0 10px 1.5rem; font-size: 16px; line-height: 1.8; text-align: center; } @media only screen and (max-width: 768px) { #home_map .content > p.lead { margin: 0 5% 1.25rem; } } /* ================================ 22. KV：写真のゆっくりズーム＋重ねフェード／コピーの 1 文字ずつフェードイン (2026.10.16) 参考：NOT A HOTEL のトップ（動画）。写真で動画のような印象に寄せる。 - 写真の切り替えは js/home.js（is-active / is-prev の付け替え、6 秒ごと）。slick は使わなくなった - 写真：上に重ねて 2 秒でフェードイン、表示中は 8 秒かけて 1.0 → 1.08 倍にズーム。 is-prev にも is-active と同じアニメーション指定をしているので、切り替わってもズームが途切れない - コピー：front-page.php で 1 文字ずつ に分けてあり、 N × 0.04 秒ずつずらして下からふわっと表示（約 1.9 秒で全部）。続けてボタンを表示 - OS の「視差効果を減らす」設定の人には動きを出さない ================================ */ #home_hero { background-color: rgba(1, 53, 115, 1); /* 最初の写真がフェードインするまでの下地（サイトの紺） */ } #home_hero_slides { position: absolute; inset: 0; overflow: hidden; } #home_hero_slides span { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; } /* is-active と is-prev はアニメーションの指定を完全に同じにしておく。 クラスが is-active → is-prev に変わってもアニメーションが作り直されず、ズームがそのまま続く （フェードは最初の 2 秒で終わっているので is-prev では不透明のまま）。重なり順だけ変える */ #home_hero_slides span.is-active, #home_hero_slides span.is-prev { opacity: 1; animation: olsHeroFade 2s ease forwards, olsHeroZoom 8s linear forwards; } #home_hero_slides span.is-active { z-index: 2; } #home_hero_slides span.is-prev { z-index: 1; } /* ズームの基点を写真ごとに変えて、毎回同じ方向に寄らないようにする */ #home_hero_slides span:nth-child(3n+1) { transform-origin: 50% 50%; } #home_hero_slides span:nth-child(3n+2) { transform-origin: 30% 60%; } #home_hero_slides span:nth-child(3n) { transform-origin: 70% 40%; } #home_hero_slides::after { z-index: 3; /* 下部のグラデーションは写真より上 */ } /* 写真全体の薄い暗幕（#home_hero_slides::before）は 2026.10.27 に削除（クライアント指示） */ @keyframes olsHeroFade { from { opacity: 0; } to { opacity: 1; } } @keyframes olsHeroZoom { from { transform: scale(1); } to { transform: scale(1.08); } } /* コピー 速さは下の 3 つの変数で調整する（2026.10.16 に「遅すぎる」とのことで約半分の時間に）。 --hero-start … 最初の文字が出始めるまで --hero-step … 1 文字ごとのずれ --hero-dur … 1 文字が出きるまでの時間 20 文字なので、全部出きるのは start + step × 19 + dur ≒ 1.9 秒 */ #home_hero_message { z-index: 4; --hero-start: 0.3s; --hero-step: 0.04s; --hero-dur: 0.8s; } #home_hero h1.hero-copy { font-size: clamp(36px, 4vw, 60px); /* 1024px で約 41px、1280px で約 51px、1500px 以上で 60px */ line-height: 1.45; text-align: left; /* 3 行の頭を揃える（2026.10.16）。ブロック自体は画面中央のまま */ } @media only screen and (max-width: 768px) { #home_hero h1.hero-copy { font-size: clamp(28px, 8vw, 44px); /* 375px で 30px、390px で約 31px */ } } #home_hero h1.hero-copy .line { display: block; } /* 翻訳対策（2026.10.17）：.text は全文（翻訳・読み上げ・検索用）、.chars は 1 文字ずつ動く表示用（翻訳対象外）。 ふだんは .text を見えない状態で置く（display:none にすると読み上げからも消えるので、画面外に切り抜く方式） */ #home_hero h1.hero-copy .text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 翻訳中（Google 翻訳が に translated-ltr / translated-rtl を付ける）は、訳された .text を表示し、 日本語のまま残る .chars を隠す。英文は長くなるので文字を少し小さくする */ html.translated-ltr #home_hero h1.hero-copy .text, html.translated-rtl #home_hero h1.hero-copy .text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; max-width: 16em; /* 英文は日本語の改行位置に合わないので、
を無視して自然に折り返す */ font-size: 0.8em; animation: olsHeroFade 0.8s ease forwards; } html.translated-ltr #home_hero h1.hero-copy .text br, html.translated-rtl #home_hero h1.hero-copy .text br { display: none; } html.translated-ltr #home_hero h1.hero-copy .chars, html.translated-rtl #home_hero h1.hero-copy .chars { display: none; } #home_hero h1.hero-copy .ch { display: inline-block; /* style.css の #home_hero h1 span { display:block } を打ち消し */ opacity: 0; animation: olsHeroChar var(--hero-dur) cubic-bezier(0.2, 0.6, 0.2, 1) forwards; animation-delay: calc(var(--hero-start) + var(--i) * var(--hero-step)); } @keyframes olsHeroChar { from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } /* ボタンはコピーのあとに続けて表示（最後の文字が出始めるのが約 1.1 秒後）。 サブコピーは 2026.10.16 に削除 */ #home_hero_message > p { opacity: 0; animation: olsHeroFade 0.8s ease forwards; animation-delay: 1.4s; } @media (prefers-reduced-motion: reduce) { #home_hero_slides span.is-active, #home_hero_slides span.is-prev, #home_hero h1.hero-copy .ch, #home_hero_message > p { animation: none; opacity: 1; } }