/* Theme Name: manaHome Theme URI: https://manaby.co.jp/ Author: manaby Description: 日中支援型グループホーム manaHome のオリジナルテーマ。Figma「TOP修正案」をもとに実装。 Version: 0.2.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: manahome */ /* ========================================================================== デザイントークン 色は Figma 書き出し画像から実測。指定いただいた 5 色に加え、 カード用の淡色（実測）と地色を追加している。 ========================================================================== */ :root { /* Brand */ --c-primary: #31A7DA; /* ブルー（実測一致） */ --c-primary-dark: #2A8EB9; /* ホバー用に生成 */ --c-primary-light: #7ED5FB; /* サービスカード青（実測） */ --c-orange: #F0832C; /* オレンジ（実測一致） */ --c-orange-dark: #CC6F25; /* ホバー用に生成 */ --c-orange-light: #FFB676; /* サービスカード橙（実測） */ --c-pink: #FF3F8C; /* ピンク（実測一致） */ --c-pink-dark: #E62E78; /* ホバー用に生成 */ /* manaHomeとは ページで使う面の色（実測） */ --c-blue-pale: #EAF9FF; /* 医療的ケアの内容セル */ --c-orange-pale: #FEF8F3; /* 対応疾患の内容セル・合計行の備考 */ --c-orange-pale2: #FFEFE2; /* 1日の流れ ゼブラの濃い側 */ --c-gray-zebra: #EBEBEB; /* 料金表 ゼブラ */ --c-red: #FF3D40; /* 合計金額 */ --c-news-bar: #7BCAEB; /* お知らせ本文 h3 の縦バー（実測） */ --c-form-border: #D9D9D9; /* 入力欄の枠線（実測） */ /* Surface */ --c-bg: #F9F7EF; /* ページ地色（実測。全セクション共通） */ --c-bg-cream: #F4EFD9; /* 電話番号ボックス等の面（ご指定色） */ --c-surface: #FFFFFF; /* Text */ --c-text: #000000; --c-text-muted: #555555; --c-text-invert: #FFFFFF; --c-border: #E5E0CE; --c-border-light: #CFE9F5; /* Typography */ --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem; --fs-hero: 3rem; --lh-tight: 1.4; --lh-base: 2; /* Spacing */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-6: 3rem; --sp-8: 4rem; --sp-12: 6rem; --sp-16: 8rem; /* Layout */ --w-content: 1200px; --w-narrow: 760px; --gutter: var(--sp-3); --header-h: 90px; /* カード上端の波形。SVG を data URI にしてマスクとして使う。 preserveAspectRatio='none' で幅に合わせて伸縮する */ --wave-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,11 C7,5 14,14 21,10 C28,6 35,14 43,10 C50,6 57,14 64,10 C71,6 78,14 86,10 C92,7 96,12 100,9 L100,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"); /* * ヒーロー写真の形。hero.jpg / office-hero.jpg のアルファ（切り抜き済みで * 書き出された形）をそのまま輪郭として書き出したもの。 * トップ … 437 x 525 の縦長楕円 * 下層 … 437 x 408。上は同じ楕円、下は手描き風に波打つ切り口 * 輪 … 写真の縁から 10px 空けて 5.5px の線を弧状に描く * SP … どちらのページも正円 * マスクと輪は同じ輪郭から作っているので、切り抜き済みの画像を入れても * 二重に切れてエッジがガタつくことがない。 */ --hero-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 468.0 556.0'%3E%3Cpath d='M7.6 359.9 L7.0 356.7 L6.5 353.4 L6.0 350.3 L5.6 347.2 L5.2 344.0 L4.8 340.9 L4.5 337.7 L4.2 334.7 L3.9 331.6 L3.7 328.4 L3.5 325.4 L3.3 322.3 L3.1 319.1 L3.0 316.0 L2.9 312.8 L2.8 309.8 L2.8 306.7 L2.8 303.3 L2.8 300.2 L2.9 297.2 L3.0 294.0 L3.1 290.9 L3.3 287.7 L3.5 284.6 L3.7 281.7 L3.8 278.9 L4.0 275.9 L4.1 273.0 L4.2 270.0 L4.3 267.0 L4.4 264.2 L4.5 261.0 L4.6 257.9 L4.8 254.7 L5.0 251.4 L5.3 248.4 L5.5 245.4 L5.8 242.1 L6.2 239.0 L6.6 235.8 L7.0 232.7 L7.4 229.7 L7.9 226.6 L8.4 223.4 L8.9 220.4 L9.4 217.3 L10.0 214.1 L10.6 211.1 L11.2 208.0 L11.9 204.7 L12.7 201.5 L13.4 198.4 L14.2 195.3 L15.1 192.1 L16.0 189.0 L16.8 186.0 L17.7 182.9 L18.7 179.6 L19.8 176.5 L20.8 173.5 L21.8 170.3 L23.0 167.1 L24.2 163.8 L25.4 160.8 L26.6 157.8 L27.9 154.6 L29.3 151.4 L30.7 148.2 L32.1 145.1 L33.6 142.0 L35.0 138.9 L36.6 135.8 L38.2 132.7 L39.8 129.6 L41.4 126.5 L43.2 123.3 L45.0 120.1 L46.9 116.9 L48.9 113.7 L50.8 110.6 L52.9 107.4 L55.1 104.3 L57.2 101.2 L59.5 98.0 L61.8 94.8 L64.2 91.7 L66.7 88.5 L69.2 85.4 L71.8 82.3 L74.5 79.1 L77.3 75.9 L80.3 72.8 L83.3 69.6 L86.3 66.5 L89.6 63.3 L93.0 60.1 L96.6 56.9 L100.3 53.8 L104.0 50.6 L108.1 47.4 L112.3 44.2 L116.8 41.1 L121.4 37.9 L126.4 34.7 L131.8 31.5 L137.5 28.3 L143.6 25.1 L150.4 21.9 L158.1 18.6 L167.1 15.3 L178.4 12.3 L182.7 10.8 L189.2 9.0 L224.1 2.8 L245.8 2.8 L284.8 8.9 L291.7 10.7 L296.5 12.2 L309.0 15.2 L318.8 18.5 L327.0 21.7 L334.3 24.9 L340.9 28.1 L346.9 31.3 L352.5 34.5 L357.8 37.7 L362.7 40.9 L367.4 44.1 L371.7 47.3 L375.9 50.5 L379.9 53.7 L383.6 56.9 L387.2 60.1 L390.6 63.3 L393.8 66.5 L396.9 69.7 L399.9 72.9 L402.7 76.0 L405.5 79.2 L408.2 82.4 L410.8 85.6 L413.3 88.8 L415.6 92.0 L417.9 95.2 L420.1 98.4 L422.2 101.6 L424.1 104.7 L426.1 107.9 L428.0 111.1 L429.8 114.3 L431.6 117.5 L433.2 120.6 L434.8 123.7 L436.5 126.9 L437.9 130.0 L439.4 133.1 L440.9 136.4 L442.2 139.5 L443.6 142.6 L444.9 145.8 L446.1 149.0 L447.2 152.1 L448.4 155.3 L449.5 158.5 L450.5 161.6 L451.5 164.9 L452.4 168.0 L453.3 171.1 L454.2 174.4 L454.9 177.4 L455.7 180.4 L456.4 183.7 L457.1 186.8 L457.8 190.0 L458.4 193.1 L459.0 196.1 L459.6 199.3 L460.1 202.4 L460.6 205.5 L461.1 208.7 L461.5 211.7 L461.9 214.8 L462.3 218.0 L462.7 221.1 L463.0 224.3 L463.3 227.3 L463.6 230.4 L463.8 233.7 L463.9 236.7 L464.2 239.7 L464.3 242.9 L464.5 246.0 L464.5 249.2 L464.6 252.2 L464.7 255.2 L464.7 258.3 L464.7 261.7 L464.7 264.8 L464.6 267.8 L464.5 270.8 L464.5 273.8 L464.4 276.8 L464.3 279.8 L464.2 282.8 L464.2 285.8 L464.1 288.8 L464.0 292.0 L463.9 295.1 L463.7 298.3 L463.5 301.4 L463.3 304.4 L463.1 307.4 L462.8 310.6 L462.5 313.7 L462.3 316.7 L462.0 319.7 L461.7 322.9 L461.3 326.0 L460.9 329.2 L460.5 332.3 L460.1 335.3 L459.6 338.5 L459.1 341.7 L458.5 344.9 L457.9 347.9 L457.3 350.9 L456.7 354.0 L456.0 357.2 L455.4 360.3 L454.7 363.3 L454.0 366.3 L453.2 369.6 L452.4 372.9 L451.5 376.0 L450.6 379.0 L449.8 382.0 L448.8 385.3 L447.7 388.5 L446.7 391.5 L445.7 394.5 L444.7 397.7 L443.5 400.9 L442.3 404.2 L441.1 407.2' fill='none' stroke='%2331A7DA' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M325.3 534.2 L317.1 537.5 L307.3 540.8 L295.2 543.8 L290.5 545.2 L283.6 547.0 L246.8 552.7 L223.7 552.7 L187.1 547.0 L180.1 545.2 L175.2 543.8 L162.9 540.8 L152.9 537.5 L144.4 534.3 L136.9 531.1 L130.2 527.9 L123.9 524.7 L118.2 521.6 L112.9 518.4 L107.8 515.2 L103.1 512.0 L98.6 508.9 L94.2 505.6 L90.2 502.5 L86.3 499.3 L82.5 496.1 L79.0 492.9 L75.6 489.7 L72.3 486.5 L69.2 483.4 L66.2 480.2 L63.2 476.9 L60.5 473.7 L57.9 470.6 L55.3 467.4 L52.8 464.1 L50.5 461.0 L48.2 457.8 L46.1 454.7 L43.9 451.6' fill='none' stroke='%2331A7DA' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M435.8 419.8 L434.4 422.9 L432.9 426.0 L431.5 429.1 L429.8 432.3 L428.2 435.4 L426.6 438.5 L424.8 441.7 L423.0 444.9 L421.1 448.1 L419.1 451.3 L417.2 454.4 L415.1 457.6 L412.9 460.7 L410.8 463.8 L408.5 467.0 L406.2 470.1 L403.7 473.4 L401.1 476.6 L398.5 479.7 L395.8 482.9 L392.8 486.2 L389.8 489.4 L386.7 492.5 L383.4 495.7 L380.0 498.9 L376.4 502.1 L372.6 505.3 L368.7 508.5 L364.5 511.7 L360.0 514.9 L355.3 518.2 L350.2 521.4 L344.8 524.6' fill='none' stroke='%23F0832C' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --hero-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 437.0 525.0'%3E%3Cpath d='M229.2 -5.5 L267.4 4.5 L273.2 6.1 L278.2 7.5 L290.4 10.6 L299.5 13.6 L307.2 16.6 L314.1 19.6 L320.3 22.7 L326.0 25.7 L331.3 28.7 L336.3 31.7 L341.0 34.8 L345.4 37.8 L349.5 40.8 L353.4 43.8 L357.2 46.8 L360.7 49.9 L364.1 52.9 L367.3 55.9 L370.3 58.9 L373.3 62.0 L376.1 65.0 L378.8 68.0 L381.5 71.0 L384.0 74.0 L386.5 77.1 L388.8 80.1 L391.0 83.1 L393.2 86.1 L395.2 89.2 L397.2 92.2 L399.1 95.2 L401.0 98.2 L402.8 101.2 L404.5 104.3 L406.2 107.3 L407.8 110.3 L409.3 113.3 L410.8 116.3 L412.3 119.4 L413.7 122.4 L415.1 125.4 L416.4 128.4 L417.7 131.4 L418.9 134.5 L420.0 137.5 L421.2 140.5 L422.3 143.5 L423.3 146.5 L424.3 149.5 L425.2 152.6 L426.1 155.6 L426.9 158.6 L427.7 161.6 L428.5 164.6 L429.2 167.6 L430.0 170.7 L430.6 173.7 L431.3 176.7 L431.8 179.7 L432.4 182.7 L433.0 185.7 L433.5 188.8 L434.0 191.8 L434.4 194.8 L434.8 197.8 L435.3 200.8 L435.6 203.8 L436.0 206.8 L436.3 209.9 L436.6 212.9 L436.9 215.9 L437.1 218.9 L437.2 221.9 L437.4 224.9 L437.6 227.9 L437.7 230.9 L437.8 234.0 L437.9 237.0 L437.9 240.0 L438.0 243.0 L438.0 246.0 L437.9 249.0 L437.9 252.0 L437.8 255.0 L437.7 258.0 L437.6 261.0 L437.6 264.0 L437.5 267.0 L437.4 270.0 L437.4 273.0 L437.3 276.1 L437.1 279.1 L437.0 282.1 L436.8 285.1 L436.6 288.1 L436.4 291.1 L436.1 294.1 L435.9 297.1 L435.6 300.1 L435.3 303.1 L435.0 306.2 L434.6 309.2 L434.3 312.2 L433.8 315.2 L433.4 318.2 L433.0 321.2 L432.5 324.3 L431.9 327.3 L431.3 330.3 L430.8 333.3 L430.2 336.3 L429.5 339.3 L428.9 342.3 L428.2 345.3 L427.5 348.3 L426.8 351.4 L426.0 354.4 L425.2 357.4 L424.3 360.4 L423.4 363.4 L422.6 366.4 L421.6 369.5 L420.6 372.5 L419.6 375.5 L418.6 378.5 L417.5 381.5 L416.3 384.5 L415.1 387.5 L414.0 390.5 L412.7 393.6 L411.4 396.6 L410.1 399.6 L408.7 402.6 L407.3 405.6 L405.8 408.7 L404.3 411.7 L402.8 414.7 L401.2 417.7 L399.5 420.7 L397.8 423.8 L396.0 426.8 L394.1 429.8 L392.2 432.8 L390.2 435.8 L388.2 438.9 L386.1 441.9 L383.9 444.9 L381.7 447.9 L379.4 450.9 L376.9 454.0 L374.4 457.0 L371.8 460.0 L369.1 463.0 L366.2 466.0 L363.3 469.1 L360.2 472.1 L356.9 475.1 L353.6 478.1 L350.0 481.2 L346.2 484.2 L342.3 487.2 L338.1 490.2 L333.6 493.3 L328.9 496.3 L323.7 499.3 L318.2 502.3 L312.1 505.4 L305.4 508.4 L297.8 511.4 L288.7 514.4 L276.9 517.4 L271.9 518.9 L266.3 520.4 L230.1 530.0 L209.4 530.0 L173.4 520.4 L167.6 518.9 L162.5 517.4 L150.5 514.4 L141.1 511.4 L133.1 508.4 L126.0 505.4 L119.6 502.3 L113.7 499.3 L108.3 496.3 L103.2 493.3 L98.4 490.3 L93.9 487.2 L89.6 484.2 L85.5 481.2 L81.7 478.2 L78.0 475.2 L74.4 472.1 L71.1 469.1 L67.8 466.1 L64.7 463.1 L61.8 460.0 L58.9 457.0 L56.2 454.0 L53.6 451.0 L51.1 448.0 L48.6 444.9 L46.3 441.9 L44.1 438.9 L41.9 435.9 L39.8 432.9 L37.8 429.8 L35.8 426.8 L33.9 423.8 L32.1 420.8 L30.3 417.8 L28.5 414.7 L26.9 411.7 L25.4 408.7 L23.9 405.7 L22.4 402.6 L21.0 399.6 L19.6 396.6 L18.3 393.6 L17.1 390.6 L15.9 387.5 L14.7 384.5 L13.7 381.5 L12.6 378.5 L11.6 375.5 L10.6 372.4 L9.7 369.4 L8.8 366.4 L8.0 363.4 L7.2 360.4 L6.5 357.3 L5.8 354.3 L5.0 351.3 L4.4 348.3 L3.7 345.3 L3.2 342.3 L2.6 339.3 L2.1 336.2 L1.7 333.2 L1.2 330.2 L0.9 327.2 L0.5 324.2 L0.2 321.1 L-0.1 318.1 L-0.4 315.1 L-0.6 312.1 L-0.8 309.1 L-1.0 306.1 L-1.1 303.1 L-1.3 300.1 L-1.4 297.0 L-1.4 294.0 L-1.5 291.0 L-1.5 288.0 L-1.4 285.0 L-1.4 282.0 L-1.3 278.9 L-1.1 275.9 L-1.0 272.9 L-0.8 269.9 L-0.6 266.9 L-0.4 263.9 L-0.3 260.9 L-0.1 257.9 L-0.1 254.9 L0.1 251.9 L0.1 249.0 L0.2 245.9 L0.4 242.9 L0.5 239.9 L0.7 236.9 L1.0 233.9 L1.2 230.9 L1.5 227.8 L1.9 224.8 L2.2 221.8 L2.7 218.8 L3.1 215.8 L3.5 212.8 L4.0 209.8 L4.5 206.8 L5.0 203.7 L5.6 200.7 L6.2 197.7 L6.7 194.7 L7.4 191.7 L8.1 188.7 L8.8 185.6 L9.6 182.6 L10.4 179.6 L11.3 176.6 L12.1 173.6 L13.0 170.6 L13.9 167.5 L14.9 164.5 L15.9 161.5 L16.9 158.5 L18.0 155.5 L19.2 152.5 L20.4 149.5 L21.5 146.5 L22.8 143.4 L24.1 140.4 L25.4 137.4 L26.8 134.4 L28.2 131.4 L29.7 128.3 L31.2 125.3 L32.7 122.3 L34.2 119.3 L35.8 116.3 L37.5 113.3 L39.2 110.2 L41.0 107.2 L42.9 104.2 L44.8 101.2 L46.8 98.2 L48.8 95.1 L50.9 92.1 L53.1 89.1 L55.3 86.1 L57.6 83.1 L60.0 80.1 L62.4 77.0 L64.9 74.0 L67.5 71.0 L70.2 68.0 L73.0 65.0 L75.8 62.0 L78.8 58.9 L81.9 55.9 L85.1 52.9 L88.5 49.9 L92.0 46.9 L95.6 43.8 L99.4 40.8 L103.5 37.8 L107.7 34.8 L112.1 31.7 L116.9 28.7 L121.9 25.7 L127.3 22.7 L133.1 19.7 L139.5 16.6 L146.7 13.6 L155.0 10.6 L166.0 7.6 L170.6 6.1 L175.8 4.5 L209.8 -5.5 Z' fill='%23000'/%3E%3C/svg%3E"); --pagehero-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 468.0 423.5'%3E%3Cpath d='M15.4 391.3 L14.4 388.1 L13.5 385.0 L12.6 381.9 L11.8 378.6 L11.0 375.5 L10.3 372.5 L9.6 369.3 L8.9 366.2 L8.2 363.0 L7.6 359.9 L7.0 356.7 L6.5 353.4 L6.0 350.3 L5.6 347.2 L5.2 344.0 L4.8 340.9 L4.5 337.7 L4.2 334.7 L3.9 331.6 L3.7 328.4 L3.5 325.4 L3.3 322.3 L3.1 319.1 L3.0 316.0 L2.9 312.8 L2.8 309.8 L2.8 306.7 L2.8 303.3 L2.8 300.2 L2.9 297.2 L3.0 294.0 L3.1 290.9 L3.3 287.7 L3.5 284.6 L3.7 281.7 L3.8 278.9 L4.0 275.9 L4.1 273.0 L4.2 270.0 L4.3 267.0 L4.4 264.2 L4.5 261.0 L4.6 257.9 L4.8 254.7 L5.0 251.4 L5.3 248.4 L5.5 245.4 L5.8 242.1 L6.2 239.0 L6.6 235.8 L7.0 232.7 L7.4 229.7 L7.9 226.6 L8.4 223.4 L8.9 220.4 L9.4 217.3 L10.0 214.1 L10.6 211.1 L11.2 208.0 L11.9 204.7 L12.7 201.5 L13.4 198.4 L14.2 195.3 L15.1 192.1 L16.0 189.0 L16.8 186.0 L17.7 182.9 L18.7 179.6 L19.8 176.5 L20.8 173.5 L21.8 170.3 L23.0 167.1 L24.2 163.8 L25.4 160.8 L26.6 157.8 L27.9 154.6 L29.3 151.4 L30.7 148.2 L32.1 145.1 L33.6 142.0 L35.0 138.9 L36.6 135.8 L38.2 132.7 L39.8 129.6 L41.4 126.5 L43.2 123.3 L45.0 120.1 L46.9 116.9 L48.9 113.7 L50.8 110.6 L52.9 107.4 L55.1 104.3 L57.2 101.2 L59.5 98.0 L61.8 94.8 L64.2 91.7 L66.7 88.5 L69.2 85.4 L71.8 82.3 L74.5 79.1 L77.3 75.9 L80.3 72.8 L83.3 69.6 L86.3 66.5 L89.6 63.3 L93.0 60.1 L96.6 56.9 L100.3 53.8 L104.0 50.6 L108.1 47.4 L112.3 44.2 L116.8 41.1 L121.4 37.9 L126.4 34.7 L131.8 31.5 L137.5 28.3 L143.6 25.1 L150.4 21.9 L158.1 18.6 L167.1 15.3 L178.4 12.3 L182.7 10.8 L189.2 9.0 L224.1 2.8 L245.8 2.8 L284.8 8.9 L291.7 10.7 L296.5 12.2 L309.0 15.2 L318.8 18.5 L327.0 21.7 L334.3 24.9 L340.9 28.1 L346.9 31.3 L352.5 34.5 L357.8 37.7 L362.7 40.9 L367.4 44.1 L371.7 47.3 L375.9 50.5 L379.9 53.7 L383.6 56.9 L387.2 60.1 L390.6 63.3 L393.8 66.5 L396.9 69.7 L399.9 72.9 L402.7 76.0 L405.5 79.2 L408.2 82.4 L410.8 85.6 L413.3 88.8 L415.6 92.0 L417.9 95.2 L420.1 98.4 L422.2 101.6 L424.1 104.7 L426.1 107.9 L428.0 111.1 L429.8 114.3 L431.6 117.5 L433.2 120.6 L434.8 123.7 L436.5 126.9 L437.9 130.0 L439.4 133.1 L440.9 136.4 L442.2 139.5 L443.6 142.6 L444.9 145.8 L446.1 149.0 L447.2 152.1 L448.4 155.3 L449.5 158.5 L450.5 161.6 L451.5 164.9 L452.4 168.0 L453.3 171.1 L454.2 174.4 L454.9 177.4 L455.7 180.4 L456.4 183.7 L457.1 186.8 L457.8 190.0 L458.4 193.1 L459.0 196.1 L459.6 199.3 L460.1 202.4 L460.6 205.5 L461.1 208.7 L461.5 211.7 L461.9 214.8 L462.3 218.0 L462.7 221.1 L463.0 224.3 L463.3 227.3 L463.6 230.4 L463.8 233.7 L463.9 236.7 L464.2 239.7 L464.3 242.9 L464.5 246.0 L464.5 249.2 L464.6 252.2 L464.7 255.2 L464.7 258.3 L464.7 261.7 L464.7 264.8 L464.6 267.8 L464.5 270.8 L464.5 273.8 L464.4 276.8 L464.3 279.8 L464.2 282.8 L464.2 285.8 L464.1 288.8 L464.0 292.0 L463.9 295.1 L463.7 298.3 L463.5 301.4 L463.3 304.4 L463.1 307.4 L462.8 310.6 L462.5 313.7 L462.3 316.7 L462.0 319.7 L461.7 322.9 L461.3 326.0 L460.9 329.2 L460.5 332.3 L460.1 335.3 L459.6 338.5 L459.1 341.7 L458.5 344.9 L457.9 347.9 L457.3 350.9 L456.7 354.0 L456.0 357.2 L455.4 360.3 L454.7 363.3 L454.0 366.3 L453.2 369.6 L452.4 372.9 L451.5 376.0 L450.6 379.0 L449.8 382.0 L448.8 385.3 L447.7 388.5 L446.7 391.5' fill='none' stroke='%2331A7DA' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --pagehero-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 437.0 408.0'%3E%3Cpath d='M229.2 -5.5 L267.4 4.5 L273.2 6.1 L278.2 7.5 L290.4 10.6 L299.5 13.6 L307.2 16.6 L314.1 19.6 L320.3 22.7 L326.0 25.7 L331.3 28.7 L336.3 31.7 L341.0 34.8 L345.4 37.8 L349.5 40.8 L353.4 43.8 L357.2 46.8 L360.7 49.9 L364.1 52.9 L367.3 55.9 L370.3 58.9 L373.3 62.0 L376.1 65.0 L378.8 68.0 L381.5 71.0 L384.0 74.0 L386.5 77.1 L388.8 80.1 L391.0 83.1 L393.2 86.1 L395.2 89.2 L397.2 92.2 L399.1 95.2 L401.0 98.2 L402.8 101.2 L404.5 104.3 L406.2 107.3 L407.8 110.3 L409.3 113.3 L410.8 116.3 L412.3 119.4 L413.7 122.4 L415.1 125.4 L416.4 128.4 L417.7 131.4 L418.9 134.5 L420.0 137.5 L421.2 140.5 L422.3 143.5 L423.3 146.5 L424.3 149.5 L425.2 152.6 L426.1 155.6 L426.9 158.6 L427.7 161.6 L428.5 164.6 L429.2 167.6 L430.0 170.7 L430.6 173.7 L431.3 176.7 L431.8 179.7 L432.4 182.7 L433.0 185.7 L433.5 188.8 L434.0 191.8 L434.4 194.8 L434.8 197.8 L435.3 200.8 L435.6 203.8 L436.0 206.8 L436.3 209.9 L436.6 212.9 L436.9 215.9 L437.1 218.9 L437.2 221.9 L437.4 224.9 L437.6 227.9 L437.7 230.9 L437.8 234.0 L437.9 237.0 L437.9 240.0 L438.0 243.0 L438.0 246.0 L437.9 249.0 L437.9 252.0 L437.8 255.0 L437.7 258.0 L437.6 261.0 L437.6 264.0 L437.5 267.0 L437.4 270.0 L437.4 273.0 L437.3 276.1 L437.1 279.1 L437.0 282.1 L436.8 285.1 L436.6 288.1 L436.4 291.1 L436.1 294.1 L435.9 297.1 L435.6 300.1 L435.3 303.1 L435.0 306.2 L434.6 309.2 L434.3 312.2 L433.8 315.2 L433.4 318.2 L433.0 321.2 L432.5 324.3 L431.9 327.3 L431.3 330.3 L430.8 333.3 L430.2 336.3 L429.5 339.3 L428.9 342.3 L428.2 345.3 L427.5 348.3 L426.8 351.4 L426.0 354.4 L425.2 357.4 L424.3 360.4 L423.4 363.4 L422.6 366.4 L421.6 369.5 L420.6 372.5 L419.6 375.5 L418.6 378.5 L417.5 381.5 L416.3 384.5 L415.1 387.5 L414.0 390.5 L412.7 393.6 L411.4 396.6 L410.2 399.5 L409.5 401.0 L408.9 402.5 L405.0 413.0 L26.5 413.0 L22.4 402.6 L21.6 401.0 L21.0 399.5 L19.6 396.6 L18.3 393.6 L17.1 390.6 L15.9 387.5 L14.7 384.5 L13.7 381.5 L12.6 378.5 L11.6 375.5 L10.6 372.4 L9.7 369.4 L8.8 366.4 L8.0 363.4 L7.2 360.4 L6.5 357.3 L5.8 354.3 L5.0 351.3 L4.4 348.3 L3.7 345.3 L3.2 342.3 L2.6 339.3 L2.1 336.2 L1.7 333.2 L1.2 330.2 L0.9 327.2 L0.5 324.2 L0.2 321.1 L-0.1 318.1 L-0.4 315.1 L-0.6 312.1 L-0.8 309.1 L-1.0 306.1 L-1.1 303.1 L-1.3 300.1 L-1.4 297.0 L-1.4 294.0 L-1.5 291.0 L-1.5 288.0 L-1.4 285.0 L-1.4 282.0 L-1.3 278.9 L-1.1 275.9 L-1.0 272.9 L-0.8 269.9 L-0.6 266.9 L-0.4 263.9 L-0.3 260.9 L-0.1 257.9 L-0.1 254.9 L0.1 251.9 L0.1 249.0 L0.2 245.9 L0.4 242.9 L0.5 239.9 L0.7 236.9 L1.0 233.9 L1.2 230.9 L1.5 227.8 L1.9 224.8 L2.2 221.8 L2.7 218.8 L3.1 215.8 L3.5 212.8 L4.0 209.8 L4.5 206.8 L5.0 203.7 L5.6 200.7 L6.2 197.7 L6.7 194.7 L7.4 191.7 L8.1 188.7 L8.8 185.6 L9.6 182.6 L10.4 179.6 L11.3 176.6 L12.1 173.6 L13.0 170.6 L13.9 167.5 L14.9 164.5 L15.9 161.5 L16.9 158.5 L18.0 155.5 L19.2 152.5 L20.4 149.5 L21.5 146.5 L22.8 143.4 L24.1 140.4 L25.4 137.4 L26.8 134.4 L28.2 131.4 L29.7 128.3 L31.2 125.3 L32.7 122.3 L34.2 119.3 L35.8 116.3 L37.5 113.3 L39.2 110.2 L41.0 107.2 L42.9 104.2 L44.8 101.2 L46.8 98.2 L48.8 95.1 L50.9 92.1 L53.1 89.1 L55.3 86.1 L57.6 83.1 L60.0 80.1 L62.4 77.0 L64.9 74.0 L67.5 71.0 L70.2 68.0 L73.0 65.0 L75.8 62.0 L78.8 58.9 L81.9 55.9 L85.1 52.9 L88.5 49.9 L92.0 46.9 L95.6 43.8 L99.4 40.8 L103.5 37.8 L107.7 34.8 L112.1 31.7 L116.9 28.7 L121.9 25.7 L127.3 22.7 L133.1 19.7 L139.5 16.6 L146.7 13.6 L155.0 10.6 L166.0 7.6 L170.6 6.1 L175.8 4.5 L209.8 -5.5 Z' fill='%23000'/%3E%3C/svg%3E"); --hero-ring-sp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 468.0 556.0'%3E%3Cpath d='M4.5 337.7 L4.2 334.7 L3.9 331.6 L3.7 328.4 L3.5 325.4 L3.3 322.3 L3.1 319.1 L3.0 316.0 L2.9 312.8 L2.8 309.8 L2.8 306.7 L2.8 303.3 L2.8 300.2 L2.9 297.2 L3.0 294.0 L3.1 290.9 L3.3 287.7 L3.5 284.6 L3.7 281.7 L3.8 278.9 L4.0 275.9 L4.1 273.0 L4.2 270.0 L4.3 267.0 L4.4 264.2 L4.5 261.0 L4.6 257.9 L4.8 254.7 L5.0 251.4 L5.3 248.4 L5.5 245.4 L5.8 242.1 L6.2 239.0 L6.6 235.8 L7.0 232.7 L7.4 229.7 L7.9 226.6 L8.4 223.4 L8.9 220.4 L9.4 217.3 L10.0 214.1 L10.6 211.1 L11.2 208.0 L11.9 204.7 L12.7 201.5 L13.4 198.4 L14.2 195.3 L15.1 192.1 L16.0 189.0 L16.8 186.0 L17.7 182.9 L18.7 179.6 L19.8 176.5 L20.8 173.5 L21.8 170.3 L23.0 167.1 L24.2 163.8 L25.4 160.8 L26.6 157.8 L27.9 154.6 L29.3 151.4 L30.7 148.2 L32.1 145.1 L33.6 142.0 L35.0 138.9 L36.6 135.8 L38.2 132.7 L39.8 129.6 L41.4 126.5 L43.2 123.3 L45.0 120.1 L46.9 116.9 L48.9 113.7 L50.8 110.6 L52.9 107.4 L55.1 104.3 L57.2 101.2 L59.5 98.0 L61.8 94.8 L64.2 91.7 L66.7 88.5 L69.2 85.4 L71.8 82.3 L74.5 79.1 L77.3 75.9 L80.3 72.8 L83.3 69.6 L86.3 66.5 L89.6 63.3 L93.0 60.1 L96.6 56.9 L100.3 53.8 L104.0 50.6 L108.1 47.4 L112.3 44.2 L116.8 41.1 L121.4 37.9 L126.4 34.7 L131.8 31.5 L137.5 28.3 L143.6 25.1 L150.4 21.9 L158.1 18.6 L167.1 15.3 L178.4 12.3 L182.7 10.8 L189.2 9.0 L224.1 2.8 L245.8 2.8 L284.8 8.9 L291.7 10.7 L296.5 12.2 L309.0 15.2 L318.8 18.5 L327.0 21.7 L334.3 24.9 L340.9 28.1 L346.9 31.3 L352.5 34.5 L357.8 37.7 L362.7 40.9 L367.4 44.1 L371.7 47.3 L375.9 50.5 L379.9 53.7 L383.6 56.9 L387.2 60.1 L390.6 63.3 L393.8 66.5 L396.9 69.7 L399.9 72.9 L402.7 76.0 L405.5 79.2 L408.2 82.4 L410.8 85.6 L413.3 88.8 L415.6 92.0 L417.9 95.2 L420.1 98.4 L422.2 101.6 L424.1 104.7 L426.1 107.9 L428.0 111.1 L429.8 114.3 L431.6 117.5 L433.2 120.6 L434.8 123.7 L436.5 126.9 L437.9 130.0 L439.4 133.1 L440.9 136.4 L442.2 139.5 L443.6 142.6 L444.9 145.8 L446.1 149.0 L447.2 152.1 L448.4 155.3 L449.5 158.5 L450.5 161.6 L451.5 164.9 L452.4 168.0 L453.3 171.1 L454.2 174.4 L454.9 177.4 L455.7 180.4 L456.4 183.7 L457.1 186.8 L457.8 190.0 L458.4 193.1 L459.0 196.1 L459.6 199.3 L460.1 202.4 L460.6 205.5 L461.1 208.7 L461.5 211.7 L461.9 214.8 L462.3 218.0 L462.7 221.1 L463.0 224.3 L463.3 227.3 L463.6 230.4 L463.8 233.7 L463.9 236.7 L464.2 239.7 L464.3 242.9 L464.5 246.0 L464.5 249.2 L464.6 252.2 L464.7 255.2 L464.7 258.3 L464.7 261.7 L464.7 264.8 L464.6 267.8 L464.5 270.8 L464.5 273.8 L464.4 276.8 L464.3 279.8 L464.2 282.8 L464.2 285.8 L464.1 288.8 L464.0 292.0 L463.9 295.1 L463.7 298.3 L463.5 301.4 L463.3 304.4 L463.1 307.4 L462.8 310.6 L462.5 313.7 L462.3 316.7 L462.0 319.7 L461.7 322.9 L461.3 326.0 L460.9 329.2 L460.5 332.3 L460.1 335.3 L459.6 338.5 L459.1 341.7 L458.5 344.9 L457.9 347.9 L457.3 350.9 L456.7 354.0 L456.0 357.2 L455.4 360.3 L454.7 363.3 L454.0 366.3 L453.2 369.6 L452.4 372.9 L451.5 376.0 L450.6 379.0 L449.8 382.0 L448.8 385.3 L447.7 388.5 L446.7 391.5 L445.7 394.5 L444.7 397.7 L443.5 400.9 L442.3 404.2 L441.1 407.2 L439.9 410.2 L438.6 413.4 L437.2 416.6 L435.8 419.8 L434.4 422.9 L432.9 426.0 L431.5 429.1 L429.8 432.3 L428.2 435.4 L426.6 438.5 L424.8 441.7 L423.0 444.9 L421.1 448.1 L419.1 451.3 L417.2 454.4 L415.1 457.6 L412.9 460.7 L410.8 463.8 L408.5 467.0 L406.2 470.1 L403.7 473.4 L401.1 476.6 L398.5 479.7 L395.8 482.9 L392.8 486.2 L389.8 489.4 L386.7 492.5 L383.4 495.7 L380.0 498.9 L376.4 502.1 L372.6 505.3 L368.7 508.5 L364.5 511.7 L360.0 514.9 L355.3 518.2 L350.2 521.4 L344.8 524.6 L338.9 527.8 L332.5 531.0 L325.3 534.2 L317.1 537.5 L307.3 540.8 L295.2 543.8 L290.5 545.2 L283.6 547.0 L246.8 552.7 L223.7 552.7 L187.1 547.0 L180.1 545.2 L175.2 543.8 L162.9 540.8 L152.9 537.5 L144.4 534.3 L136.9 531.1 L130.2 527.9 L123.9 524.7 L118.2 521.6 L112.9 518.4 L107.8 515.2 L103.1 512.0' fill='none' stroke='%2331A7DA' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M69.2 483.4 L66.2 480.2 L63.2 476.9 L60.5 473.7 L57.9 470.6 L55.3 467.4 L52.8 464.1 L50.5 461.0 L48.2 457.8 L46.1 454.7 L43.9 451.6 L41.8 448.3 L39.9 445.2 L38.0 442.1 L36.1 438.9 L34.2 435.7 L32.4 432.4 L30.8 429.2 L29.3 426.2 L27.7 423.0 L26.2 419.8 L24.8 416.6 L23.4 413.4 L22.2 410.3 L20.9 407.2 L19.7 403.9 L18.6 400.8 L17.4 397.7 L16.4 394.4 L15.4 391.3 L14.4 388.1 L13.5 385.0 L12.6 381.9 L11.8 378.6 L11.0 375.5 L10.3 372.5 L9.6 369.3 L8.9 366.2 L8.2 363.0' fill='none' stroke='%23F0832C' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --radius: 12px; --radius-lg: 24px; --shadow: 0 4px 16px rgba(0, 0, 0, 0.08); } @media (max-width: 1100px) { :root { --fs-hero: 2.5rem; --fs-3xl: 2rem; } } @media (max-width: 767px) { :root { /* SP デザイン実測: 見出しの字面の高さ 20-21px → 24px（行送りは 40px＝1.65） */ --fs-hero: 1.5rem; --fs-3xl: 1.75rem; --fs-2xl: 1.5rem; --gutter: var(--sp-2); --header-h: 64px; } } /*追加*/ #global-nav ul li:nth-of-type(4),#global-nav ul li:nth-of-type(5){ display: none; @media screen and (max-width: 900px){ display: block; } } .c-pagetop-top{ font-size: 14px; top: -13px; } .c-pagetop-fontawesome{ top: 4px; font-size: 17px; } .gallery-top-img{ margin-left: 50px; @media screen and (max-width: 900px){ margin-left: 10px; width: 50%; } } .offices-title-img{ @media screen and (max-width: 900px){ position: absolute; left: 5px; top: -115px; width: 17%; } } .news-bottom-img{ position: absolute; bottom: -49px; right: 0; } .about-mark-img{ position: absolute; bottom: 0; right: -6%; z-index: 3; @media screen and (max-width: 1300px){ right: -3%; } @media screen and (max-width: 900px){ top: -48px; left: 12px; bottom: auto; width: 115px; } } .p-about-intro{ position: relative; } .instagram-title-img{ position: absolute; top: -44px; left: -36px; @media screen and (max-width: 900px){ width: 35px; top: -20px; left: -9px; } } .c-decohead img{ position: absolute; top: -51px; right: -43px; @media screen and (max-width: 900px){ width: 35px; top: -18px; right: -11px; } } .first-bottom-mark-img{ width: 100%; position: absolute; top: 89%; @media screen and (max-width: 900px){ display: none; } } .home-service-title{ margin-left: 15%; position: relative; @media screen and (max-width: 900px){ margin-left: 0; } } .home-service-img-pc{ position: absolute; left: -61px; top: -48px; @media screen and (max-width: 900px){ display: none; } } .home-service-img-sp{ display: none; @media screen and (max-width: 900px){ display: block; position: absolute; top: 8px; left: 229px; width: 35px; } } .p-page-hero__small-text{ @media screen and (max-width: 900px){ font-size:14px; } @media screen and (max-width: 480px){ font-size:3vw; } } .p-pagehero__body:not(.home) { padding-top: 47px; } .p-about-price-short-title br{ display: none; @media screen and (max-width: 900px){ display: block; } } .p-about-price__note{ font-size: var(--fs-sm); margin-top: var(--sp-3); padding-top: var(--sp-3); } .p-consent-page{ margin-bottom: 30px; } /**/ /* ========================================================================== Reset / Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; } ul[class], ol[class] { list-style: none; } html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); /* メニュー展開時に body の overflow:hidden でスクロールバーが消え、 レイアウトが横にずれるのを防ぐ */ scrollbar-gutter: stable; } body { font-family: var(--ff-base); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: opacity .2s, color .2s, background-color .2s; } a:hover { opacity: .75; } button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: -100px; left: var(--sp-2); z-index: 999; padding: var(--sp-1) var(--sp-2); background: var(--c-surface); box-shadow: var(--shadow); } .skip-link:focus { top: var(--sp-1); } /* ========================================================================== Layout ========================================================================== */ .l-container { width: 100%; max-width: var(--w-content); margin-inline: auto; padding-inline: var(--gutter); } .l-container--narrow { max-width: var(--w-narrow); } .l-section { padding-block: var(--sp-12); } @media (max-width: 767px) { .l-section { padding-block: var(--sp-8); } } /* ========================================================================== Components ========================================================================== */ /* --- 六角形の矢印ボタン（デザイン頻出パーツ） ------------------------------- Figma では手描き風にエッジが揺れているが、CSS の clip-path では直線の 正六角形になる。完全一致させる場合は Figma から SVG を書き出して mask-image に差し替えること。 --------------------------------------------------------------------- */ .c-hexbtn { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 700; } .c-hexbtn__icon { flex: 0 0 auto; width: 52px; height: 58px; display: grid; place-items: center; background: var(--c-primary); color: var(--c-text-invert); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: background-color .2s; } .c-hexbtn:hover { opacity: 1; } .c-hexbtn:hover .c-hexbtn__icon { background: var(--c-primary-dark); } .c-hexbtn__icon svg { width: 22px; height: 22px; } /* 白抜きバリエーション（Contact セクション内） */ .c-hexbtn--invert .c-hexbtn__icon { background: var(--c-surface); color: var(--c-primary); } .c-hexbtn--invert:hover .c-hexbtn__icon { background: var(--c-bg-cream); } /* ラベル下に罫線が入るバリエーション */ .c-hexbtn--underline .c-hexbtn__label { padding-bottom: var(--sp-1); border-bottom: 1px solid currentColor; } /* --- ピンクのCTAボタン（ヘッダー） ----------------------------------------- */ .c-btn-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.9em 2em; background: var(--c-pink); color: var(--c-text-invert); font-size: var(--fs-sm); font-weight: 700; border-radius: 5px; line-height: 1.2; box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.24); } .c-btn-cta:hover { background: var(--c-pink-dark); opacity: 1; } /* --- セクション見出し ------------------------------------------------------ */ .c-sectitle { margin-bottom: var(--sp-6); } .c-sectitle__eyebrow { display: ruby; color: var(--c-primary); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; line-height: 1.4; margin-right: 255px; @media screen and (max-width: 900px){ margin-right: 192px; } } .c-sectitle__eyebrow img{ @media screen and (max-width: 900px){ width: 35px; } } .c-sectitle__main { font-size: var(--fs-3xl); letter-spacing: .06em; } /* 左右に罫線が伸びる見出し（SNS セクション） */ .c-sectitle--rule { text-align: center; } .c-sectitle--rule .c-sectitle__main { display: flex; align-items: center; gap: var(--sp-4); justify-content: center; } .c-sectitle--rule .c-sectitle__main::before, .c-sectitle--rule .c-sectitle__main::after { content: ""; flex: 1 1 0; height: 1px; background: var(--c-text); } /* --- カテゴリバッジ -------------------------------------------------------- */ .c-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 100px; padding: 0.35em 1em; background: var(--c-primary); color: var(--c-text-invert); font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; border-radius: 9999px; } /* --- 汎用カード ------------------------------------------------------------ */ .c-card { background: var(--c-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .c-card__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .c-card__body { padding: var(--sp-3); } .c-card__date { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); } .c-card__title { font-size: var(--fs-lg); margin-block: var(--sp-1); } .c-card__excerpt { font-size: var(--fs-sm); color: var(--c-text-muted); } /* --- 汎用ページヘッダー / 記事 --------------------------------------------- */ .c-page-header { margin-bottom: var(--sp-6); } .c-page-header__title { font-size: var(--fs-3xl); } .c-entry__title { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); } .c-entry__date { font-size: var(--fs-sm); color: var(--c-text-muted); } .c-entry__thumb { margin-block: var(--sp-4); } .c-entry__body > * + * { margin-top: var(--sp-3); } .c-post-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); } /* --- 検索フォーム ---------------------------------------------------------- */ .c-searchform { display: flex; gap: var(--sp-1); max-width: 420px; } .c-searchform__input { flex: 1 1 auto; padding: 0.7em 1em; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); } .c-searchform__submit { padding: 0.7em 1.4em; background: var(--c-primary); color: var(--c-text-invert); font-weight: 700; border-radius: var(--radius); } /* ========================================================================== Header ========================================================================== */ .l-header { position: fixed; width: 100%; top: 0; z-index: 100; background: var(--c-bg); /* .l-header__bar の margin を子の外へ逃がさず、自身の高さに含める。 こうしないと margin-top がこの要素の外側に「はみ出し」、 sticky の top:0 が視覚的にずれてしまう。 */ display: flow-root; transition: background-color .2s ease; } /* スクロール時、地色（--c-bg）を消して背後のページを透けさせる。 実際に見える白いカードは .l-header__bar 側が担当する。 */ .l-header.is-scrolled { background: transparent;} /* --- ヘッダーの帯（スクロール時にカード化する部分） ------------------------- */ .l-header__bar { margin: 0; border-radius: 0; box-shadow: none; background: transparent; transition: margin .25s ease, border-radius .25s ease, box-shadow .25s ease, background-color .25s ease; } .l-header.is-scrolled .l-header__bar { margin: 13px 22px; /* 半透明の白。背後のページがうっすら透ける。 文字の可読性を保つため背景をぼかす（非対応ブラウザでも 不透明度 .82 で十分読める）。 */ background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: 20px; box-shadow: var(--shadow); } @media (max-width: 900px) { .l-header.is-scrolled .l-header__bar { margin: 12px 15px; border-radius: 16px; } } .l-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--header-h); } .l-header__brand img { max-height: 40px; width: auto; } .l-header__title { font-size: var(--fs-xl); color: var(--c-primary); } .l-header__nav { display: flex; align-items: center; gap: var(--sp-4); } .l-header__menu { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-sm); font-weight: 700; } /* PC ではサブメニューを使わない（SP ドロップダウンのみで開閉する仕様） */ .l-header__menu .sub-menu { display: none; } .l-header__cta { margin-left: var(--sp-2); } /* ハンバーガー */ .l-header__toggle { display: none; position: relative; width: 44px; height: 44px; } .l-header__toggle-bar, .l-header__toggle-bar::before, .l-header__toggle-bar::after { position: absolute; left: 50%; width: 26px; height: 2px; background: var(--c-text); transition: transform .25s, opacity .25s; } .l-header__toggle-bar { top: 50%; transform: translate(-50%, -50%); } .l-header__toggle-bar::before, .l-header__toggle-bar::after { content: ""; left: 0; transform: none; } .l-header__toggle-bar::before { top: -8px; } .l-header__toggle-bar::after { top: 8px; } .l-header__toggle[aria-expanded="true"] .l-header__toggle-bar { background: transparent; } .l-header__toggle[aria-expanded="true"] .l-header__toggle-bar::before { transform: translateY(8px) rotate(45deg); } .l-header__toggle[aria-expanded="true"] .l-header__toggle-bar::after { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 900px) { .l-header__toggle { display: block; z-index: 1; } /* * デザイン変更: フルスクリーンのスライドインから、 * ヘッダー直下に浮くドロップダウンカードへ変更。 * .l-header（position:sticky = 位置指定祖先）を基準に絶対配置し、 * 表示/非表示は opacity + visibility でフェードさせる * （transform は使わない。使うと新しい包含ブロックができ、 * 兄弟要素の .l-header__mobilecta が position:fixed で * 画面に対して固定されなくなるため）。 */ .l-header__nav { position: absolute; top: 100%; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 0; margin-top: 8px; padding: var(--sp-2) var(--sp-4); background: var(--c-surface); border-radius: 20px; box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; } .l-header__nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .2s ease, transform .2s ease; } .l-header__menu { flex-direction: column; align-items: stretch; gap: 0; width: 100%; font-size: var(--fs-base); } .l-header__menu > li { border-bottom: 1px solid var(--c-border-light); } .l-header__menu > li:first-child { border-top: 1px solid var(--c-border-light); } .l-header__menu > li > a { display: block; padding: var(--sp-3) 2px; font-weight: 700; } /* アコーディオン。JS が動いたときだけ has-sub が付き、閉じた状態になる */ .l-header__menu > li.has-sub { position: relative; } .l-header__menu > li.has-sub > a { padding-right: 44px; } .l-header__menu > li.has-sub .sub-menu { display: none; } .l-header__menu > li.has-sub.is-open .sub-menu { display: block; } .l-header__menu .sub-menu { margin: 0 0 var(--sp-2); /* ブラウザ既定の箇条書き記号（・）を消す */ list-style: none; padding-left: var(--sp-2); font-size: var(--fs-sm); font-weight: 400; } .l-header__menu .sub-menu > li { border: 0; } .l-header__menu .sub-menu > li > a { display: block; padding: var(--sp-1) 0; } .l-header__acc { position: absolute; top: 14px; right: 0; width: 44px; height: 52px; display: grid; place-items: center; } .l-header__acc-mark { width: 0; height: 0; border: 7px solid transparent; border-top-color: var(--c-primary); border-bottom: 0; transition: transform .2s; } .l-header__acc[aria-expanded="true"] .l-header__acc-mark { transform: rotate(180deg); } /* CTA はドロップダウン内ではなく、画面下部の固定バーに集約する */ .l-header__cta { display: none; } body.is-nav-open { overflow: hidden; } } /* --- SP: 画面下部固定の CTA -------------------------------------------------- 通常はメニュー展開中だけ出す。 manaHomeとは のページ（body.has-sticky-cta）では常時表示する。 -------------------------------------------------------------------------- */ .l-header__mobilecta { display: none; } body.is-nav-open .l-header__mobilecta, body.has-sticky-cta .l-header__mobilecta { display: block; position: fixed; inset: auto 0 0 0; z-index: 101; background: rgba(0, 0, 0, .6); /* バー全体で指1本分（約56px）に収まる薄さにする */ padding: 6px var(--gutter); /* iPhone のホームバー領域を避ける */ padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } /* 常時表示のときは固定バーがフッター下端に重なるため、その分の逃げを作る */ @media (max-width: 900px) { body.has-sticky-cta .l-wrapper { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); } } .l-header__mobilecta-inner { position: relative; max-width: 420px; margin-inline: auto; } /* 吹き出しはボタンの上端に重ねて、バーの高さを増やさない */ .l-header__mobilecta-bubble { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); z-index: 2; margin: 0; padding: .15em .9em; background: var(--c-surface); border-radius: 9999px; color: var(--c-pink); font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; } .l-header__mobilecta-btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-1); /* 高さ44px（タップ領域の下限）に収める */ min-height: 44px; padding: 0 var(--sp-3); background: var(--c-pink); color: var(--c-text-invert); border-radius: 9999px; font-size: var(--fs-sm); font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); } .l-header__mobilecta-btn:hover { background: var(--c-pink-dark); opacity: 1; } .l-header__mobilecta-btn .c-btn__mark { width: 22px; } .l-header__mobilecta-btn svg { width: 18px; height: 18px; flex: 0 0 auto; } @media (min-width: 901px) { .l-header__mobilecta { display: none !important; } } /* ========================================================================== Footer ========================================================================== */ .l-footer { background: var(--c-surface); padding-block: var(--sp-8) var(--sp-4); } .l-footer__inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: var(--sp-6); align-items: start; } .l-footer__brand img { max-height: 44px; width: auto; } .l-footer__menu { font-size: var(--fs-sm); } .l-footer__menu > li + li { /*margin-top: var(--sp-2);*/ } .l-footer__menu .sub-menu { margin-top: var(--sp-1); padding-left: var(--sp-2); border-left: 1px solid var(--c-text); font-size: var(--fs-xs); @media screen and (max-width: 900px){ border-left: none; } } .l-footer__menu .sub-menu li + li { margin-top: 2px; } .l-footer__contact { display: grid; gap: var(--sp-2); justify-items: start; } .l-footer__tel { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-3); background: var(--c-bg-cream); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3; white-space: nowrap; } .l-footer__hours { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; } .l-footer__cta { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--c-pink); font-size: var(--fs-sm); font-weight: 700; } .l-footer__cta .c-hexbtn__icon { background: var(--c-pink); width: 44px; height: 50px; } .l-footer__cta:hover .c-hexbtn__icon { background: var(--c-pink-dark); } .l-footer__cta .c-hexbtn__label { padding-bottom: 4px; border-bottom: 1px solid currentColor; } .l-footer__copyright { grid-column: 1 / -1; text-align: right; font-size: var(--fs-xs); color: var(--c-text-muted); } /* ページ先頭へ戻る */ /* clip-path は border ごと切り落としてしまうため、 ピンクの六角形の上に一回り小さい白の六角形を重ねて枠線を表現する */ .c-pagetop { position: absolute; right: var(--gutter); top: -34px; width: 62px; height: 68px; display: grid; place-items: center; gap: 0; background: var(--c-pink); color: var(--c-pink); font-size: 11px; font-weight: 700; line-height: 1.2; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .c-pagetop::after { content: ""; position: absolute; inset: 2px; background: var(--c-surface); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .c-pagetop > * { position: relative; z-index: 1; } .c-pagetop:hover { opacity: 1; } .c-pagetop:hover::after { background: var(--c-bg-cream); } .l-footer { position: relative; } /* --- SP・タブレットのフッター ------------------------------------------------ デザインでは1列のリストになり、項目のあいだに罫線が入る。 電話番号から下は中央寄せ。 ヘッダーがハンバーガーに切り替わる 900px と境目を揃える （768〜900px に中途半端な2カラムが残らないようにするため）。 */ @media (max-width: 900px) { .l-footer__inner { display: block; } .l-footer__brand { margin-bottom: var(--sp-4); } .l-footer__menu { font-size: var(--fs-base); } .l-footer__menu > li { border-top: 1px solid var(--c-text); margin: 0; } /* 2つのナビをまたいで、最後の項目だけ下線を引く */ .l-footer__col:last-of-type .l-footer__menu > li:last-child { border-bottom: 1px solid var(--c-text); } .l-footer__menu > li > a { display: block; padding: var(--sp-2) 0; } .l-footer__menu .sub-menu { margin: 0 0 var(--sp-2); padding-left: var(--sp-2); font-size: var(--fs-sm); } /* アコーディオン。JS が動いたときだけ has-sub が付き、閉じた状態になる */ .l-footer__menu > li.has-sub { position: relative; } .l-footer__menu > li.has-sub > a { padding-right: 44px; } .l-footer__menu > li.has-sub .sub-menu { display: none; } .l-footer__menu > li.has-sub.is-open .sub-menu { display: block; } .l-footer__acc { position: absolute; top: 6px; right: 0; width: 44px; height: 52px; display: grid; place-items: center; } .l-footer__acc-mark { width: 0; height: 0; border: 7px solid transparent; border-top-color: #999; border-bottom: 0; transition: transform .2s; } .l-footer__acc[aria-expanded="true"] .l-footer__acc-mark { transform: rotate(180deg); } .l-footer__contact { justify-items: center; margin-top: var(--sp-6); text-align: center; } .l-footer__tel { font-size: var(--fs-xl); } .l-footer__copyright { margin-top: var(--sp-4); text-align: center; } /* お問い合わせセクションの導線はデザインでは右寄せ */ .p-contact__body .c-hexbtn { align-self: flex-end; } } /* ========================================================================== Front page sections ========================================================================== パネル類のエッジはデザイン上手描き風に揺れている。CSS の clip-path / border-radius では直線・真円になるため、質感を完全一致させたい場合は Figma からエッジを SVG で書き出し mask-image に差し替えること。 ========================================================================== */ /* --- Hero ----------------------------------------------------------------- */ .p-hero { position: relative; /* あしらいの SVG は写真より下に約28%はみ出す。 下余白が足りないと overflow: hidden で下端の三角が切れるため、 デザインのヒーロー高（1440px時で630px）に合うよう確保する。 */ padding-block: var(--sp-8) 130px; overflow: hidden; } .p-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; margin-top: 60px; } .p-hero__eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; margin-bottom: var(--sp-1); } .p-hero__eyebrow br{ display: none; @media screen and (max-width: 900px){ display: block; } } .p-hero__logo { margin-bottom: var(--sp-4); } .p-hero__logo img { max-width: 340px; } .p-hero__title { font-size: var(--fs-hero); letter-spacing: .04em; line-height: 1.5; } .p-hero__title em { font-style: normal; color: var(--c-orange); } .p-hero__illust { margin-top: var(--sp-6); } /* 写真本体を切り抜き、その外側に弧（リング）を描く。 .p-hero__photo 側で overflow: hidden すると弧まで切れてしまうため、 丸みは中の画像に持たせている。 */ .p-hero__photo { position: relative; /* デザイン実測では写真は列幅の 73%（1440px 時で 445px）。 px 固定にすると画面が狭いときに相対的に大きくなりすぎる。 あしらいの SVG は写真の右に 32% ぶん張り出すため、 列の中央寄せにすると右端で見切れる。左寄せにして逃がす。 */ /* デザイン実測: 1440px時に写真445px = ビューポートの約31%。 列幅の%だけだと狭い画面で相対的に大きくなり、 右のあしらいが画面端に張り付いてしまう。vw で上限をかける。 */ width: min(78%, 31vw); /* デザインでは列の中央よりわずかに左。中央寄せがいちばん近い */ margin-inline: auto; aspect-ratio: 437 / 525; } /* あしらいの も .p-hero__photo の中にあるため、直下の子だけに絞る。 絞らないと、あしらいの SVG まで写真と同じ形に切り抜かれて消えてしまう。 */ .p-hero__photo > img, .p-hero__photo > .c-placeholder { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: var(--hero-mask); mask-image: var(--hero-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* 青の弧2本＋オレンジの弧1本。写真の外側 15.5/436（＝3.555%）まではみ出す */ .p-hero__photo::before { content: ""; position: absolute; inset: -2.952% -3.547%; background-repeat: no-repeat; background-size: 100% 100%; background-image: var(--hero-ring); pointer-events: none; } .p-hero__deco { position: absolute; pointer-events: none; z-index: -1; } @media (max-width: 900px) { /* あしらいSVGは縦372:横221と縦長で、写真より下に大きく張り出す。 下余白が足りないと下端のドットと三角が丸ごと切れる。 */ /* SP デザイン実測：写真の上端はヘッダー下 21.5px（y85.5） */ .p-hero { padding-block: 22px 190px; } /* SP デザインでは写真が右上に配置され、見出しの右側に重なる */ .p-hero__inner { position: relative; grid-template-columns: 1fr; gap: var(--sp-4); } .p-hero__body { position: relative; z-index: 1; } /* * 写真は楕円なので、高さによって左端が変わる。 * デザイン実測（402px）では * ロゴ x20-170（幅150）… その高さでの写真の左端は 194 * 小見出し x36-152 … 同 205 * 見出し x14-190 … 同 193 * ロゴがいちばん写真に近いので、幅を実測に合わせて切る。 */ .p-hero__eyebrow { max-width: 52%; } .p-hero__logo { max-width: 41%; } .p-hero__title { max-width: 62%; line-height: 1.65; } .p-hero__logo img { max-width: 100%; } .p-hero__photo { position: absolute; top: 0; /* SP デザイン（402px）実測：写真 213.5 x 256.5px、右端は画面外へ 4px。 % はコンテナのパディングボックス（＝画面幅）に対する値。 タブレット幅まで比率のまま伸ばすと大きくなりすぎるので上限を付ける。 */ right: max(-1%, -6px); width: min(53.11%, 250px); z-index: 0; } /* あしらいは写真より下（y389-429）まで並ぶ。街並みイラストはその下から始める。 デザインでも街並みの上端は y430 付近で、あしらーの下端とちょうど接する。 */ .p-hero__illust { margin-top: 125px; } /* SP も PC と同じ縦長楕円。弧だけ、画面に残る左側に寄せた並びに差し替える */ .p-hero__photo::before { background-image: var(--hero-ring-sp); } } @media (max-width: 480px) { .p-hero__eyebrow { font-size: var(--fs-xs); } } /* SP でのみ有効になる改行（デザインの改行位置に合わせる） */ .u-br-sp { display: none; } @media (max-width: 900px) { .u-br-sp { display: inline; } } /* --- manaHome とは -------------------------------------------------------- */ .p-about { position: relative; padding-block: var(--sp-8); } /* 実測比 イラスト652 : パネル544。 デザインではパネルは中央ではなく下寄せ（下端がイラストとほぼ揃う）。 */ /* デザイン実測（1440px 時）: イラスト x145-751（606 x 744）／ 家型パネル x752-1298（546 x 613） 2つは重ならず隣り合う。パネルの下の頂点だけイラストより 43px 下に出る。 */ .p-about__inner { display: grid; grid-template-columns: 606fr 546fr; align-items: end; } /* デザインではイラストがパネルより手前に来る */ .p-about__figure { position: relative; z-index: 1; @media screen and (max-width: 900px){margin-right: -20px; margin-left: 40px;}} /* ラベルは下線＋左に伸びるかぎ線（デザインの括弧状のあしらい） */ .p-about__label { position: relative; display: inline-block; padding: var(--sp-2) var(--sp-1) 0; margin-bottom: var(--sp-6); font-size: var(--fs-sm); letter-spacing: .08em; } .p-about__label::before { content: ""; position: absolute; left: -18px; right: 0; bottom: 24px; height: 56px; border-left: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); border-bottom-left-radius: 10px; pointer-events: none; } /* 書き出し画像の縦横比はデザインの枠と違うので、実測比で切り抜く */ .p-about__figure img { width: 100%; aspect-ratio: 606 / 744; object-fit: cover; border-radius: 16px; @media screen and (max-width: 900px){ border-top-right-radius: 0; border-bottom-right-radius: 0; } } /* 上下とも尖った六角形（manaHome のロゴマークと同じ形）。 実測：全高 613 のうち 屋根 157 / 下の頂点 156。 角度が内容量で変わらないよう px で固定する。 */ .p-about__panel { position: relative; /* 下の頂点がイラストより少し下に出る */ margin-bottom: -43px; padding: 176px var(--sp-6) 172px; background: var(--c-surface); clip-path: polygon( 50% 0, 100% 157px, 100% calc(100% - 156px), 50% 100%, 0 calc(100% - 156px), 0 157px ); } .p-about__title { display: flex; justify-content: center; align-items: center; gap: var(--sp-2); font-size: var(--fs-2xl); margin-bottom: var(--sp-3); } .p-about__title span{ font-size: 24px; @media screen and (max-width: 900px){ font-size: 20px; } } .p-about__title img { max-height: 44px; width: auto; } .p-about__text { font-size: var(--fs-sm); } .p-about__more { margin-top: var(--sp-4); display: flex; justify-content: center; } @media (max-width: 900px) { .p-about__inner { display: flex; flex-direction: column-reverse;} .p-about__panel { margin-bottom: 0; padding: 90px var(--gutter) 96px; clip-path: polygon( 50% 0, 100% 80px, 100% calc(100% - 80px), 50% 100%, 0 calc(100% - 80px), 0 80px ); } .p-about__label { margin-bottom: var(--sp-4); } .p-about__label::after { bottom: -32px; height: 32px; } } /* --- Service -------------------------------------------------------------- */ /* カードがステージから左右にはみ出すので、画面端で横スクロールが出ないよう切る */ .p-service { position: relative; overflow: hidden; padding-block: var(--sp-8) var(--sp-12); } .p-service__stage { position: relative; max-width: 1000px; margin-inline: auto; margin-top: calc(var(--sp-4) * -1); padding: var(--sp-4) var(--sp-8); background: var(--c-surface); border-radius: 9999px; min-height: 300px; height: 20px; display: flex; flex-direction: column; justify-content: center; @media screen and (max-width: 900px){ height: auto; } } .p-service__cards { display: flex; justify-content: center; align-items: center; gap: var(--sp-4); } .p-service__card { position: relative; width: min(240px, 38%); aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-3); color: var(--c-text-invert); font-size: var(--fs-lg); font-weight: 700; line-height: 1.6; border-radius: 4px; } /* カードはステージから上下にはみ出して重なる（デザイン再現） */ .p-service__card--home { background: var(--c-orange-light); transform: rotate(10deg) translateY(79px); } .p-service__card--nurse { background: var(--c-primary-light); transform: rotate(-9deg) translate(50px, -86px); } .p-service__card img { width: 64px; margin-bottom: auto; } .p-service__card small { font-size: var(--fs-sm); } .p-service__card--nurse img{ margin-left: 60%; } .p-service__more { display: flex; justify-content: flex-end; margin-bottom: 40px; width: 86%;} /* SP デザインでは白いステージが縦長のピルになり、 オレンジが左、ブルーが右にはみ出して重なる。 実測（402px時）: ステージ幅312 / カード幅236 / 左右に約28pxはみ出す。 */ @media (max-width: 900px) { .p-service__stage { max-width: 340px; margin-inline: auto; margin-top: 0; padding: var(--sp-6) var(--sp-4) var(--sp-4); border-radius: 9999px; min-height: 0; } .p-service__cards { flex-direction: column; align-items: stretch; gap: var(--sp-3); } .p-service__card { width: 78%; } .p-service__card--home { align-self: flex-start; margin-left: -16%; transform: rotate(10deg) translateY(0); } .p-service__card--nurse { align-self: flex-end; margin-right: -16%; transform: rotate(-9deg) translateY(0); } .p-service__more { justify-content: center; padding-left: 0; width: 100%; margin-top: 28px; margin-bottom: 0;} } /* --- Gallery（写真3枚の帯） ------------------------------------------------ */ /* 下端のカーブ（::after）を左右 5% はみ出させているため、 overflow: hidden で切らないとページに横スクロールが出る */ .p-gallery { position: relative; overflow: hidden; } .p-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); } .p-gallery__grid img { width: 100%; height: clamp(220px, 26vw, 380px); object-fit: cover; } .p-gallery::after { /*content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: 90px; background: var(--c-bg); border-radius: 50% 50% 0 0 / 100% 100% 0 0; */ } @media (max-width: 767px) { .p-gallery__grid img { height: 140px; } .p-gallery::after { height: 40px; } } /* --- 事業所一覧の導線 ------------------------------------------------------ */ .p-offices { @media screen and (max-width: 900px){ padding-top: 4rem; } } .p-offices__link { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); max-width: 640px; margin-inline: auto; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--c-text); font-size: var(--fs-xl); font-weight: 700; letter-spacing: .08em; } .p-offices__link img { max-height: 40px; width: auto;} @media (max-width: 767px) { .p-offices__link { font-size: var(--fs-lg); flex-wrap: wrap; } .p-offices__link img { width: 70%; } } /* --- News ----------------------------------------------------------------- */ .p-news { padding-block: var(--sp-8); } .p-news__inner { display: grid; grid-template-columns: 320px 1fr; align-items: stretch; } .p-news__head { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--sp-4); padding: var(--sp-8) var(--sp-4); background: var(--c-primary); color: var(--c-text-invert); text-align: center; border-top-left-radius: 20px; border-bottom-left-radius: 20px; @media screen and (max-width: 900px){ border-bottom-left-radius: 0px; border-top-right-radius: 20px; flex-direction: row; justify-content: space-between; } } .p-news__eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; @media screen and (max-width: 900px){ display: none; }} .p-news__title { font-size: var(--fs-2xl); letter-spacing: .16em; } .p-news__head .c-hexbtn__icon { background: var(--c-surface); color: var(--c-primary); } .p-news__body { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-4) var(--sp-6); background: var(--c-surface); position: relative; border-top-right-radius: 20px; border-bottom-right-radius: 20px; @media screen and (max-width: 900px){ border-top-right-radius: 0px; border-bottom-left-radius: 20px; } } .p-news__item + .p-news__item { border-top: 1px solid var(--c-border-light); } .p-news__link { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--sp-3); padding-block: var(--sp-2); } .p-news__date { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; } .p-news__text { text-decoration: underline; font-size: var(--fs-sm); } @media (max-width: 900px) { .p-news__inner { grid-template-columns: 1fr; } .p-news__head { padding: 1.5rem; } .p-news__body { padding: var(--sp-3) var(--gutter); } .p-news__link { grid-template-columns: auto auto; justify-content: start; column-gap: var(--sp-2); row-gap: var(--sp-1); } .p-news__text { grid-column: 1 / -1; } } /* --- Instagram ------------------------------------------------------------ */ .p-instagram { padding-block: var(--sp-8); } .p-instagram__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-6); } .p-instagram__grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); } .p-instagram__more { display: flex; justify-content: flex-end; margin-top: var(--sp-4); } @media (max-width: 767px) { .p-instagram__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); } .p-instagram__more { justify-content: center; } } /* --- Contact -------------------------------------------------------------- */ .p-contact { display: grid; grid-template-columns: 1.9fr 1.1fr; } .p-contact__figure { position: relative; } .p-contact__figure img { width: 100%; height: 100%; object-fit: cover; } .p-contact__body { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); padding: var(--sp-12) var(--sp-6); background: var(--c-primary); color: var(--c-text-invert); } .p-contact__eyebrow { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; } .p-contact__title { font-size: var(--fs-3xl); letter-spacing: .16em; } @media (max-width: 900px) { .p-contact { grid-template-columns: 1fr; } .p-contact__figure img { height: 260px; } .p-contact__body { padding: var(--sp-6) var(--gutter) 100px; } } /* --- 該当なし表示 ---------------------------------------------------------- */ .c-noresult { display: grid; gap: var(--sp-3); } /* --- 画像プレースホルダ ---------------------------------------------------- assets/images/ に画像が未配置のとき manahome_image() が出力する枠。 本番用画像を置けば自動的に img へ切り替わる。 -------------------------------------------------------------------------- */ .c-placeholder { display: grid; width: 100%; place-items: center; min-height: 120px; padding: var(--sp-2); background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, .04) 0 8px, rgba(0, 0, 0, .07) 8px 16px ); border: 1px dashed var(--c-border); border-radius: var(--radius); color: var(--c-text-muted); font-size: var(--fs-xs); text-align: center; word-break: break-all; } .p-hero__photo .c-placeholder, .p-pagehero__photo .c-placeholder, .p-office__main .c-placeholder, .p-contact__figure .c-placeholder { height: 100%; } .p-gallery__grid .c-placeholder { height: clamp(220px, 26vw, 380px); border-radius: 0; } .p-instagram__grid .c-placeholder { aspect-ratio: 1 / 1; } .p-service__card .c-placeholder { width: 64px; min-height: 64px; margin-bottom: auto; } .l-header__brand .c-placeholder { min-height: 40px; width: 160px; } .l-footer__brand .c-placeholder { min-height: 44px; width: 180px; } .p-about__title .c-placeholder { min-height: 44px; width: 150px; } .p-offices__link .c-placeholder { min-height: 40px; width: 150px; } /* --- 補助 ------------------------------------------------------------------ */ .p-news__list { width: 100%; } .l-footer__col { min-width: 0; } /* ========================================================================== 下層ページ共通パーツ ========================================================================== */ /* --- パンくず -------------------------------------------------------------- */ .c-breadcrumb { padding-block: var(--sp-3); font-size: var(--fs-sm); } .c-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; } .c-breadcrumb__item + .c-breadcrumb__item::before { content: ">"; margin-right: var(--sp-1); color: var(--c-text-muted); } .c-breadcrumb__item a { text-decoration: underline; } /* --- 下層ページのヒーロー --------------------------------------------------- */ .p-pagehero { position: relative; overflow: hidden; padding-block: var(--sp-8) var(--sp-4); } .p-pagehero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; margin-top: 60px; } .p-pagehero__eyebrow { display: block; color: var(--c-primary); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; } .p-pagehero__title { font-size: var(--fs-3xl); letter-spacing: .06em; position: relative; z-index: 3; @media screen and (max-width: 900px){ font-size: 1.5rem; } } .post-type-archive-office .p-pagehero__title{ @media screen and (max-width: 480px){ font-size: 1rem; } } .p-pagehero__illust { margin-top: var(--sp-6); } /* * 縦長楕円の下を切り落としたアーチ。切り口は手描き風に波打つので、 * border-radius では出せない。SVG の mask で切り抜く。 * 輪（青い弧）は写真の外側に出すため ::before に持たせている。 */ .p-pagehero__photo { position: relative; /* デザイン実測（1440px 時）：写真 436px ＝ 列幅 587px の約 74% */ width: 74%; margin-right: auto; aspect-ratio: 437 / 408; } .p-pagehero__photo > img, .p-pagehero__photo > .c-placeholder { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: var(--pagehero-mask); mask-image: var(--pagehero-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .p-pagehero__photo::before { content: ""; position: absolute; /* 輪は写真の外側 15.5 デザイン単位ぶん出る。下側は弧がないので 0 */ inset: -3.799% -3.547% 0; background-repeat: no-repeat; background-size: 100% 100%; background-image: var(--pagehero-ring); pointer-events: none; } /* SP デザインでは写真が右上に回り込み、見出しの右側に重なる（トップと同じ組み方） */ @media (max-width: 900px) { /* SP デザイン実測：写真の上端はヘッダー下 27px（y91） */ .p-pagehero { padding-block: 27px var(--sp-4); } .p-pagehero__inner { position: relative; grid-template-columns: 1fr; gap: var(--sp-4); } /* * SP デザイン実測（402px）: * eyebrow の上端 y173 / 街並みイラスト y315-370（写真の枠は y111 から） * 街並みは見出しの行数で位置が変わらないよう、本文の中で絶対配置にする。 * min-height は、写真と街並みの下端（y370 ＝ 枠から 259px）を収めるための高さ。 */ .p-pagehero__body { position: relative; z-index: 1; padding-top: 82px; min-height: 268px; } /* 見出しが写真の下にもぐらないよう、デザインの折返し位置に合わせて幅を切る */ .p-pagehero__eyebrow, .p-pagehero__title { max-width: 46%; } /* 街並みイラストはデザインでは左半分だけ。全幅だと写真とぶつかる */ .p-pagehero__illust { position: absolute; left: 0; top: 224px; width: 49%; max-width: 49%; margin: 0; } .p-pagehero__photo { position: absolute; top: 0; /* SP デザイン（402px）実測：写真 222.7 x 267.5px、右端は画面外へ 30px。 */ right: max(-7.51%, -34px); width: min(55.4%, 260px); margin-right: 0; z-index: 0; /* SP はアーチではなく、トップと同じ縦長楕円になる */ aspect-ratio: 437 / 525; } .p-pagehero__photo > img, .p-pagehero__photo > .c-placeholder { -webkit-mask-image: var(--hero-mask); mask-image: var(--hero-mask); /* 切り抜き済み画像でも縁が欠けないよう、ほんの少し内側で切る */ -webkit-mask-size: 99% 99%; mask-size: 99% 99%; -webkit-mask-position: center; mask-position: center; } .p-pagehero__photo::before { inset: -2.952% -3.547%; background-image: var(--hero-ring-sp); } } /* --- 青い下線つきの見出し --------------------------------------------------- */ .c-headline { display: inline-block; margin-bottom: var(--sp-4); padding-bottom: var(--sp-1); border-bottom: 3px solid var(--c-primary); font-size: var(--fs-2xl); letter-spacing: .06em; } /* --- ピル（絞り込み・特徴タグ） --------------------------------------------- */ .c-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; } .c-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; padding: 0.6em 1.4em; background: var(--c-surface); border: 2px solid var(--c-primary); border-radius: 9999px; color: var(--c-primary); font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; } .c-pill:hover { background: var(--c-primary); color: var(--c-text-invert); opacity: 1; } .c-pill.is-active { background: var(--c-primary); color: var(--c-text-invert); } .c-pill--static { min-width: 0; cursor: default; } .c-pill--static:hover { background: var(--c-surface); color: var(--c-primary); } /* --- ボタン ---------------------------------------------------------------- */ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); min-width: 300px; padding: 0.9em 1.6em; border-radius: 9999px; color: var(--c-text-invert); font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); } .c-btn:hover { opacity: 1; transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); } .c-btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .c-btn--blue { background: var(--c-primary); } .c-btn--blue:hover { background: var(--c-primary-dark); } .c-btn--orange { background: var(--c-orange); } .c-btn--orange:hover { background: var(--c-orange-dark); } @media (max-width: 767px) { .c-btn { min-width: 0; width: 100%; } .c-pill { min-width: 0; } } /* ========================================================================== 事業所一覧 ========================================================================== */ .p-officelist__filter { margin-bottom: var(--sp-8); } .p-officelist__filter-label { margin-bottom: var(--sp-2); color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 700; } .p-officelist__group + .p-officelist__group { margin-top: var(--sp-8); } .c-office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } /* --- 事業所カード ---------------------------------------------------------- */ .c-office-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); } .c-office-card__thumb { line-height: 0; } .c-office-card__thumb img, .c-office-card__thumb .c-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* 青い帯。上端の波形は SVG マスクで表現する（Figma の手描き風の縁の近似） */ .c-office-card__body { position: relative; margin-top: -28px; padding: var(--sp-3) var(--sp-3) var(--sp-3); background: var(--c-primary); color: var(--c-text-invert); -webkit-mask-image: var(--wave-mask); mask-image: var(--wave-mask); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .c-office-card__name { font-size: var(--fs-lg); letter-spacing: .04em; margin-bottom: var(--sp-1); } /* カード全面をクリック領域にする */ .c-office-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .c-office-card:hover .c-office-card__thumb img { opacity: .9; } .c-office-card__row { display: flex; align-items: flex-start; gap: var(--sp-1); font-size: var(--fs-sm); line-height: 1.6; } .c-office-card__row + .c-office-card__row { margin-top: 2px; } .c-office-card__row svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .2em; } /* 電話番号はカード全体のリンクより手前に置いて個別に押せるようにする */ .c-office-card__tel a { position: relative; z-index: 2; font-weight: 700; text-decoration: underline; } @media (max-width: 900px) { .c-office-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .c-office-grid { grid-template-columns: 1fr; } } /* ========================================================================== 事業所 詳細 ========================================================================== */ .p-office__title { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); background: var(--c-primary); color: var(--c-text-invert); border-radius: var(--radius); font-size: var(--fs-2xl); letter-spacing: .08em; } /* --- ギャラリー ------------------------------------------------------------ */ .p-office__main { border-radius: var(--radius); overflow: hidden; } .p-office__main img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .p-office__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); list-style: none; padding: 0; } .p-office__thumb { display: block; width: 100%; padding: 0; border: 3px solid transparent; border-radius: var(--radius); overflow: hidden; line-height: 0; transition: border-color .2s; } .p-office__thumb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .p-office__thumb.is-active { border-color: var(--c-primary); } .p-office__thumb:hover { border-color: var(--c-primary-light); } .p-office__features { margin-top: var(--sp-4); } /* --- 基本情報 / アクセスマップ ---------------------------------------------- */ .p-office__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); margin-top: var(--sp-8); align-items: start; } .c-deflist { display: grid; border-radius: var(--radius); overflow: hidden; background: var(--c-surface); } .c-deflist__row { display: grid; grid-template-columns: 150px 1fr; align-items: stretch; } .c-deflist__row + .c-deflist__row dd { border-top: 1px solid var(--c-border-light); } .c-deflist dt { display: flex; align-items: center; padding: var(--sp-2) var(--sp-3); background: var(--c-primary); color: var(--c-text-invert); font-weight: 700; font-size: var(--fs-sm); } .c-deflist dd { display: flex; align-items: center; margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; } .c-deflist dd a { text-decoration: underline; } .p-office__mapframe { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: #e0e0e0; } .p-office__mapframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .p-office__mapframe--empty { display: grid; place-items: center; color: var(--c-text-muted); font-size: var(--fs-sm); } .p-office__body { margin-top: var(--sp-6); } /* --- 下部ボタン ------------------------------------------------------------ */ .p-office__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); } @media (max-width: 900px) { .p-office__cols { grid-template-columns: 1fr; gap: var(--sp-6); } } @media (max-width: 600px) { .c-deflist__row { grid-template-columns: 110px 1fr; } .p-office__thumbs { grid-template-columns: repeat(2, 1fr); } .p-office__actions { flex-direction: column; } } /* オレンジボタン内のロゴマーク */ .c-btn__mark { flex: 0 0 auto; width: 26px; line-height: 0; } .c-btn__mark .c-placeholder { min-height: 26px; padding: 0; font-size: 0; } /* ========================================================================== manaHomeとは ページ ========================================================================== */ .p-about-page > section { padding-block: var(--sp-8); } .p-about-page__extra { margin-bottom: var(--sp-8); } /* --- 白い大パネル ---------------------------------------------------------- */ .c-panel { background: var(--c-surface); border-radius: var(--radius-lg); padding: var(--sp-6); position: relative; } /* --- 吹き出し見出し（青帯＋下向きの尻尾） ------------------------------------ */ .c-balloon { position: relative; margin-bottom: var(--sp-6); padding: var(--sp-2) var(--sp-4); background: var(--c-primary); color: var(--c-text-invert); border-radius: 9999px; font-size: var(--fs-xl); font-weight: 700; text-align: center; letter-spacing: .08em; } .c-balloon::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 14px solid transparent; border-top-color: var(--c-primary); border-bottom: 0; } /* --- 小見出し（青・太字） --------------------------------------------------- */ .c-subhead { margin: var(--sp-6) 0 var(--sp-2); color: var(--c-primary); font-size: var(--fs-xl); letter-spacing: .06em; } /* --- 装飾つき見出し（四角＋三角＋下線） -------------------------------------- */ .c-decohead { position: relative; display: inline-block; margin-bottom: var(--sp-4); padding: 0 var(--sp-2) var(--sp-1) 120px; font-size: var(--fs-2xl); letter-spacing: .06em; } /* 見出し左の装飾。四角（塗り）と三角（線画）の組み合わせを SVG の data URI で描く。色は変種ごとに差し替える。 */ .c-decohead::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-58%); width: 101px; height: 89px; background-repeat: no-repeat; background-size: contain; } .c-decohead::after { content: ""; position: absolute; left: 94px; right: 0; bottom: 0; height: 2px; } .c-decohead--blue::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105 93'%3E%3Crect x='4.5' y='4.5' width='65' height='65' rx='10' fill='%2331A7DA' transform='rotate(-8 37 37)'/%3E%3Cpolygon points='82,37 101,89 45,77' fill='none' stroke='%23F0832C' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E"); } .c-decohead--blue::after { background: var(--c-orange); } .c-decohead--orange::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 105 93'%3E%3Crect x='4.5' y='4.5' width='65' height='65' rx='10' fill='%23F0832C' transform='rotate(-8 37 37)'/%3E%3Cpolygon points='82,37 101,89 45,77' fill='none' stroke='%2331A7DA' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E"); } .c-decohead--orange::after { background: var(--c-primary); } @media (max-width: 600px) { .c-decohead { padding-left: 84px; } .c-decohead::before { width: 71px; height: 62px; } .c-decohead::after { left: 67px; } } /* --- 導入セクション -------------------------------------------------------- */ .p-about-intro__panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; padding: var(--sp-8); @media screen and (max-width: 900px){ padding: 100px 1.5rem !important; } } .p-about-intro__figures { display: grid; gap: var(--sp-3); } .p-about-intro__figures img, .p-about-intro__figures .c-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); } .p-about-intro__body { padding-block: var(--sp-4); border-top: 1px solid var(--c-text); border-bottom: 1px solid var(--c-text); } .p-about-intro__title { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-2xl); } .p-about-intro__title .c-placeholder { min-height: 44px; width: 150px; } .p-about-intro__title img { max-height: 44px; width: auto; } .p-about-intro__text { font-size: var(--fs-sm); } @media (max-width: 900px) { .p-about-intro__panel { grid-template-columns: 1fr; padding: var(--sp-4); } /* SP デザインでは説明文が先、イラストが後ろに来る */ .p-about-intro__body { order: -1; } .p-about-intro__title { justify-content: flex-start; } .p-about-intro__title img { max-height: 52px; } .p-about-intro__title .c-placeholder { width: 62%; min-height: 52px; } .p-about-intro__text { font-size: var(--fs-base); } } /* --- 提供サービスの2カラム -------------------------------------------------- */ .p-about-service__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .c-service-item__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); border-radius: 9999px; font-weight: 700; font-size: var(--fs-lg); } .c-service-item__icon { flex: 0 0 auto; width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; } .c-service-item__icon img { width: 56px; height: auto; @media screen and (max-width: 900px){ width: 37px; } } .c-service-item__icon .c-placeholder { width: 100%; height: 100%; min-height: 0; border-radius: 50%; } .c-service-item__label { padding-right: var(--sp-3); line-height: 1.5; } .c-service-item__label small { font-size: var(--fs-sm); } .c-service-item__text { font-size: var(--fs-sm); } .c-service-item--orange .c-service-item__head { background: var(--c-orange-pale); color: var(--c-orange); } .c-service-item--orange .c-service-item__icon { background: var(--c-orange); } .c-service-item--blue .c-service-item__head { background: var(--c-blue-pale); color: var(--c-primary); } .c-service-item--blue .c-service-item__icon { background: var(--c-primary); } @media (max-width: 767px) { .p-about-service__grid { grid-template-columns: 1fr; } .c-service-item__icon { width: 68px; height: 68px; } .c-service-item__head { font-size: var(--fs-base); } } /* --- 対象者（点線区切りの青枠ボックス） -------------------------------------- */ .c-target { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); padding: var(--sp-4); border: 2px solid var(--c-primary); border-radius: var(--radius-lg); list-style: none; margin: 0; } .c-target__item { display: flex; align-items: center; gap: var(--sp-2); } .c-target__item + .c-target__item { border-left: 3px dotted var(--c-primary); padding-left: var(--sp-3); } /* デザイン実測：円は PC 80px / SP 70px。 アイコンは3つとも縦横比が違うので、幅を揃えず原寸のまま中央に置く。 */ .c-target__icon { flex: 0 0 auto; width: 80px; height: 80px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; } .c-target__icon img { width: auto; height: auto; max-width: 60%; max-height: 68%; } .c-target__icon .c-placeholder { width: 100%; height: 100%; min-height: 0; border-radius: 50%; } .c-target__icon--orange { background: var(--c-orange); } .c-target__icon--blue { background: var(--c-primary); padding-top: 4px;} .c-target__text { font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; } /* 導入部で改行し、強調部を次の行に落とす（デザインの組み方に合わせる） */ .c-target__lead { display: block; } .c-target__main { display: block; } .c-target__text strong { font-size: var(--fs-xl); color: var(--c-orange); } .c-target__text small { display: block; font-size: var(--fs-xs); font-weight: 400; } @media (max-width: 900px) { .c-target { grid-template-columns: 1fr; } .c-target__item + .c-target__item { border-left: 0; padding-left: 0; padding-top: var(--sp-3); border-top: 3px dotted var(--c-primary); } } /* --- 医療的ケア / 対応疾患 --------------------------------------------------- */ .p-about-service__medical { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .c-tagblock { display: grid; grid-template-columns: 104px 1fr; border-radius: var(--radius); overflow: hidden; } .c-tagblock__label { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-2) var(--sp-1); color: var(--c-text-invert); font-weight: 700; font-size: var(--fs-lg); line-height: 1.3; text-align: center; } .c-tagblock__items { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-content: center; margin: 0; padding: var(--sp-2) var(--sp-3); list-style: none; font-size: var(--fs-sm); } .c-tagblock--blue .c-tagblock__label { background: var(--c-primary); } .c-tagblock--blue .c-tagblock__items { background: var(--c-blue-pale); } .c-tagblock--orange .c-tagblock__label { background: var(--c-orange); } .c-tagblock--orange .c-tagblock__items { background: var(--c-orange-pale); } @media (max-width: 767px) { .p-about-service__medical { grid-template-columns: 1fr; } .c-tagblock { grid-template-columns: 80px 1fr; } .c-tagblock__label { font-size: var(--fs-base); } } /* --- Point（manaHomeの特長） ------------------------------------------------ */ .c-pointhead { position: relative; width: fit-content; margin: 0 auto var(--sp-6); padding-top: 46px; } /* デザインでは「Point」は背景と同じクリーム色の塗り＋オレンジの縁取りで、 オレンジ箱の上端に重なる。塗りをオレンジにすると箱と同色で消えるため、 fill = 地色 / stroke = オレンジ にする。 */ .c-pointhead__eyebrow { position: absolute; top: 0; left: 20px; z-index: 1; color: var(--c-bg); font-size: 2.5rem; font-weight: 700; line-height: 1.1; letter-spacing: .04em; -webkit-text-stroke: 3px var(--c-orange); paint-order: stroke fill; } .c-pointhead__title { padding: var(--sp-3) var(--sp-8); background: var(--c-orange); color: var(--c-text-invert); border-radius: var(--radius-lg); font-size: var(--fs-2xl); letter-spacing: .08em; text-align: center; } .p-about-point__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); align-items: start; } .c-pointcard { padding: var(--sp-4) var(--sp-3); background: var(--c-surface); border: 3px solid var(--c-primary); border-radius: var(--radius-lg); box-shadow: 4px 4px 0 rgba(0, 0, 0, .08); text-align: center; } .c-pointcard--orange { border-color: var(--c-orange); } /* デザイン上、中央のカードだけ下にずれている */ .p-about-point__cards > .c-pointcard:nth-child(2) { margin-top: var(--sp-8); } .c-pointcard__figure { margin-bottom: var(--sp-3); } .c-pointcard__figure img, .c-pointcard__figure .c-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; } .c-pointcard__title { margin-bottom: var(--sp-2); font-size: var(--fs-lg); letter-spacing: .06em; } .c-pointcard--blue .c-pointcard__title { color: var(--c-primary); } .c-pointcard--orange .c-pointcard__title { color: var(--c-orange); } .c-pointcard__text { font-size: var(--fs-sm); text-align: left; line-height: 1.8; } @media (max-width: 900px) { .p-about-point__cards { grid-template-columns: 1fr; } .p-about-point__cards > .c-pointcard:nth-child(2) { margin-top: 0; } .c-pointhead__title { padding: var(--sp-2) var(--sp-4); } } /* --- 1日の流れ ------------------------------------------------------------- */ .c-timeline { list-style: none; margin: 0; padding: 0; } .c-timeline__item { position: relative; display: grid; grid-template-columns: 126px 64px 200px 1fr; align-items: center; gap: var(--sp-2); min-height: 96px; padding: var(--sp-2) var(--sp-3); } .c-timeline__item:nth-child(odd) { background: var(--c-orange-pale2); } .c-timeline__item:nth-child(even) { background: var(--c-orange-pale); } .c-timeline__time { font-size: 1.75rem; font-weight: 700; text-align: right; letter-spacing: .02em; } /* 時計アイコンの円と、円どうしをつなぐ縦線。 線はセル全体（行の高さ）に渡して描き、その上に円を重ねることで 行間で途切れないようにする。 */ .c-timeline__mark { position: relative; align-self: stretch; justify-self: center; width: 52px; display: grid; place-items: center; } /* 縦線。行の上下パディング（--sp-2）の分まで伸ばして、 行と行のあいだで途切れないようにする。 */ .c-timeline__mark::before { content: ""; position: absolute; left: 50%; top: calc(var(--sp-2) * -1); bottom: calc(var(--sp-2) * -1); width: 4px; transform: translateX(-50%); background: var(--c-orange); } .c-timeline__item:first-child .c-timeline__mark::before { top: 30%; } .c-timeline__item:last-child .c-timeline__mark::before { bottom: 50%; } /* * icon-clock-01〜07.svg には白い丸とオレンジの輪が含まれているため、 * CSS 側では円を描かず、画像を実測サイズ（PC 52px / SP 35px）で置くだけにする。 * 画像が未配置のときは .c-placeholder に同じ円を描かせて代用する。 */ .c-timeline__mark img, .c-timeline__mark .c-placeholder { position: relative; z-index: 1; } .c-timeline__mark img { width: 52px; height: auto; } .c-timeline__mark .c-placeholder { width: 52px; min-height: 52px; padding: 0; font-size: 0; border: 3px solid var(--c-orange); border-radius: 50%; background: var(--c-surface); } .c-timeline__title { font-weight: 700; letter-spacing: .04em; } .c-timeline__text { font-size: var(--fs-sm); } .p-about-day__note { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 2px solid var(--c-orange); font-size: var(--fs-sm); text-align: right; } @media (max-width: 900px) { /* SP デザイン実測: 円 35px / 時刻 18px / 行は説明がなければ約72px */ .c-timeline__item { grid-template-columns: 48px 35px 1fr; /* 1行目＝時刻・円・見出し、2行目＝説明。 円は1行目の中央に置き、縦線は2行にまたがらせる。 */ grid-template-rows: 35px auto; column-gap: var(--sp-1); row-gap: 2px; min-height: 68px; padding-block: var(--sp-1); } .c-timeline__time, .c-timeline__title { align-self: center; } /* 縦線が説明行の高さまで伸びるように、マークを全行にまたがらせる。 行を明示すると自動配置の対象外になり列がずれるため、列も明示する。 */ .c-timeline__mark { grid-column: 2; grid-row: 1 / -1; } .c-timeline__time { grid-column: 1; grid-row: 1; } .c-timeline__title { grid-column: 3; grid-row: 1; } .c-timeline__text { grid-column: 3; grid-row: 2; } /* マークは2行にまたがるので、円は1行目（35px）の中央に絶対配置で合わせる */ .c-timeline__mark img, .c-timeline__mark .c-placeholder { position: absolute; left: 50%; top: 22px; transform: translate(-50%, -50%); } .c-timeline__title, .c-timeline__text { padding-left: 20px; } .c-timeline__time { font-size: 1.125rem; } .c-timeline__mark { width: 35px; } .c-timeline__mark::before { width: 3px; top: calc(var(--sp-1) * -1); bottom: calc(var(--sp-1) * -1); } .c-timeline__mark img { width: 35px; } .c-timeline__mark .c-placeholder { width: 35px; min-height: 35px; border-width: 2px; } .c-timeline__title { font-size: var(--fs-base); } .c-timeline__text { font-size: var(--fs-xs); } .p-about-day__note { text-align: left; } } /* --- 入居までの流れ --------------------------------------------------------- */ .c-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); list-style: none; margin: 0; padding: 0; align-items: stretch; } /* グリッド項目は既定で min-width:auto のため、中身より小さくなれず横に溢れる。 0 にして縮められるようにする。 */ .c-flow__item { position: relative; display: flex; min-width: 0; } /* カード間の三角矢印。PC は右向き、SP は下向き */ .c-flow__item + .c-flow__item::before { content: ""; position: absolute; left: calc(var(--sp-4) * -0.6); top: 50%; transform: translate(-2px, -50%); width: 0; height: 0; border: 10px solid transparent; border-left-color: var(--c-orange); border-right: 0; } .c-flow__card { display: flex; flex-direction: column; width: 100%; min-width: 0; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; } /* 番号バッジはカード左上に固定サイズで置く。 タイトルが2行になってもバッジの大きさは変わらない（デザイン実測 78x88）。 */ .c-flow__head { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: 88px; font-weight: 700; } .c-flow__num { flex: 0 0 auto; width: 78px; height: 88px; display: grid; place-items: center; color: var(--c-text-invert); font-size: 2rem; line-height: 1; /* 左上はカードの角丸に合わせ、右下だけ大きく丸める */ border-radius: var(--radius) 0 24px 0; } .c-flow__num--orange { background: var(--c-orange); } .c-flow__num--blue { background: var(--c-primary); } .c-flow__title { display: flex; align-items: center; min-height: 88px; min-width: 0; padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; font-size: 1.25rem; line-height: 1.4; overflow-wrap: anywhere; } .c-flow__figure { padding: var(--sp-2) var(--sp-3); } .c-flow__figure img, .c-flow__figure .c-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; } .c-flow__text { margin-top: auto; padding: 0 var(--sp-3) var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; white-space: pre-line; width: auto; margin: 0 auto; } /* タブレット〜小さめのデスクトップ。4カラムを保ったまま各部を縮める */ @media (min-width: 901px) and (max-width: 1100px) { .c-flow { gap: var(--sp-2); } .c-flow__item + .c-flow__item::before { left: calc(var(--sp-2) * -0.6); } .c-flow__head { min-height: 68px; } .c-flow__num { width: 56px; height: 68px; font-size: 1.5rem; } .c-flow__title { min-height: 68px; font-size: var(--fs-base); } .c-flow__figure { padding: var(--sp-1) var(--sp-2); } .c-flow__text { padding: 0 var(--sp-2) var(--sp-2); font-size: var(--fs-xs); } } @media (max-width: 900px) { .c-flow { grid-template-columns: 1fr; gap: var(--sp-6); } .c-flow__head { min-height: 72px; } .c-flow__num { width: 64px; height: 72px; font-size: 1.75rem; } .c-flow__title { min-height: 72px; font-size: var(--fs-lg); } .c-flow__item + .c-flow__item::before { left: 50%; top: calc(var(--sp-6) * -0.6); transform: translate(-50%, -2px); border: 12px solid transparent; border-top-color: var(--c-orange); border-bottom: 0; } } /* --- 利用料金 -------------------------------------------------------------- */ .p-about-price__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2); } /* 横スクロールの案内は、実際にスクロールが必要な幅でだけ出す */ .p-about-price__scroll { display: none; color: var(--c-orange); font-weight: 700; font-size: var(--fs-sm); margin: 0 0 0 82%; } .c-tablewrap { overflow-x: auto; } .c-pricetable { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--fs-sm); } .c-pricetable th, .c-pricetable td { padding: var(--sp-2) var(--sp-3); text-align: left; } .c-pricetable thead th { background: var(--c-primary); color: var(--c-text-invert); text-align: center; font-weight: 700; } .c-pricetable thead th + th { border-left: 3px solid #d9d9d9; } .c-pricetable td { border-left: 3px solid #d9d9d9; } .c-pricetable tbody tr:nth-child(odd) { background: var(--c-surface); } .c-pricetable tbody tr:nth-child(even) { background: var(--c-gray-zebra); } .c-pricetable tbody th { font-weight: 400; } .c-pricetable__amount { text-align: right; white-space: nowrap; } .c-pricetable__yen { margin-left: .2em; font-size: var(--fs-xs); } .c-pricetable__total th { background: var(--c-orange); color: var(--c-text-invert); font-weight: 700; } .c-pricetable__total td { background: var(--c-orange-pale); } .c-pricetable__total .c-pricetable__amount strong { color: var(--c-red); font-size: var(--fs-xl); } @media (max-width: 767px) { .p-about-price__scroll { display: inline; } } /* SP では白パネルの内側余白を詰める（PC の 48px だと内容幅が足りなくなる） */ @media (max-width: 767px) { .c-panel { padding: var(--sp-3); border-radius: var(--radius); position: relative;} .c-target { padding: var(--sp-3); } .c-target__icon { width: 70px; height: 70px; } .c-timeline__item { padding-inline: var(--sp-1); } .c-balloon { font-size: var(--fs-lg); } .c-pointhead__title { font-size: var(--fs-xl); } .c-pointhead { padding-top: 34px; } .c-pointhead__eyebrow { font-size: 1.75rem; -webkit-text-stroke-width: 2px; } } /* ========================================================================== お知らせ（一覧・詳細） ========================================================================== */ /* --- 一覧 ------------------------------------------------------------------ */ /* * PC デザイン（フレーム幅 1440px）の実測値に合わせている。 * 絞り込みピル … 100 x 30px・間隔 20px・下に 4px の影 * 白パネル … 角丸 24px・上下 padding 37px・左右 padding 110px * 1行 … 高さ 80px・区切り線は 2px #D5F3FF でパネルの内側いっぱい * 行の中身 … 左右 padding 32px・カラム間隔 50px・日付/タイトルとも 16px * 左右 padding は狭い画面で効きすぎないよう % と併記している。 */ .p-newslist__filter { gap: 20px; margin-bottom: 26px; } .p-newslist__filter .c-pill { min-width: 100px; padding: 3px 1em; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); } .p-newslist__filter .c-pill:hover { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); } .p-newslist__panel { padding: 37px min(9%, 110px); } .c-newsrows { list-style: none; margin: 0; padding: 0; } /* 区切り線を含めて 1行 80px になるよう、高さは li 側で持たせる */ .c-newsrows__item { display: flex; min-height: 80px; } .c-newsrows__item + .c-newsrows__item { border-top: 2px solid #D5F3FF; } .c-newsrows__link { flex: 1 1 auto; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 50px; padding-inline: var(--sp-4); } .c-newsrows__date { font-size: 1rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap; } .c-newsrows__title { font-size: 1rem; text-decoration: underline; } /* 中間幅では行内の余白とカラム間隔を詰めて、タイトルの折返しを避ける */ @media (max-width: 1100px) { .c-newsrows__link { gap: var(--sp-3); padding-inline: var(--sp-2); } } /* * SP デザイン（フレーム幅 402px）の実測値。 * 白パネル … 左右 18px・上下 6px の padding、角丸 12px * 1行 … 高さ 48px・カラム間隔 10px * 文字 … 日付 10px・タイトル 11px・バッジ 10px（最小幅 58px） * PC と同じく日付・バッジ・タイトルは1行に並ぶ。 */ @media (max-width: 767px) { /* * ピルは5つで1行に収まるよう等分（デザイン実測 65 x 23px・間隔 9px）。 * flex アイテムは li なので、伸縮は li 側に指定する。 */ .p-newslist__filter { gap: 9px; margin-bottom: 16px; } .p-newslist__filter > li { flex: 1 1 0; min-width: fit-content; /* タブレット幅で間延びしないよう PC と同じ 100px で頭打ちにする */ max-width: 100px; } .p-newslist__filter .c-pill { width: 100%; min-width: 0; padding: 1px .4em; font-size: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); } .p-newslist__filter .c-pill:hover { box-shadow: 0 2px 0 rgba(0, 0, 0, .25); } .p-newslist__panel { padding: 6px 18px; } .c-newsrows__item { min-height: 48px; } .c-newsrows__link { grid-template-columns: auto auto 1fr; column-gap: 10px; row-gap: 0; padding-inline: 3px; } .c-newsrows__date { font-size: 10px; } .c-newsrows__title { font-size: 11px; } .c-newsrows .c-badge { min-width: 58px; padding-inline: .5em; font-size: 10px; } } /* デザイン幅（402px）より狭い端末では、余白とバッジを詰めて1行を保つ */ @media (max-width: 401px) { .p-newslist__panel { padding-inline: 8px; } .c-newsrows__link { column-gap: 6px; } .c-newsrows .c-badge { min-width: 50px; } } /* iPhone SE など 375px 未満では、タイトルを日付・バッジの下へ回り込ませる */ @media (max-width: 374px) { .c-newsrows__link { grid-template-columns: auto auto; justify-content: start; row-gap: var(--sp-1); padding-block: var(--sp-2); } .c-newsrows__item { min-height: 0; } .c-newsrows__title { grid-column: 1 / -1; } } /* --- ページネーション ------------------------------------------------------- */ /* the_posts_pagination() が出力する .page-numbers に当てる */ .c-pagination { margin-top: 29px; display: flex; justify-content: center; gap: 5px; } .c-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; } /* デザイン実測：50 x 50px・角丸 5px・下に 4px の影 */ .c-pagination .page-numbers { display: grid; place-items: center; min-width: 50px; height: 50px; padding-inline: .4em; background: var(--c-surface); border: 2px solid var(--c-primary); border-radius: 5px; box-shadow: 0 4px 0 rgba(0, 0, 0, .25); color: var(--c-primary); font-size: 1rem; font-weight: 700; line-height: 1; } .c-pagination a.page-numbers:hover { background: var(--c-primary); color: var(--c-text-invert); opacity: 1; transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); } .c-pagination .page-numbers.current { background: var(--c-primary); color: var(--c-text-invert); } /* ページ送りは SP だけ一回り小さく（デザイン実測 32 x 32px・間隔 10px） */ @media (max-width: 767px) { .c-pagination { margin-top: 20px; } .c-pagination .nav-links { gap: 10px; } .c-pagination .page-numbers { min-width: 32px; height: 32px; border-radius: 4px; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); font-size: var(--fs-sm); } .c-pagination a.page-numbers:hover { box-shadow: 0 2px 0 rgba(0, 0, 0, .25); } } /* 「…」は枠なしで詰めて見せる */ .c-pagination .page-numbers.dots { border-color: transparent; background: transparent; box-shadow: none; color: var(--c-text-muted); } /* --- 詳細 ------------------------------------------------------------------ 本文まわりはデザイン実測で 800px 幅（1440px 時）。 -------------------------------------------------------------------------- */ .p-newssingle > .l-container { max-width: 848px; } /* 記事ヘッダーの青帯 */ .p-newssingle__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--c-primary); color: var(--c-text-invert); border-radius: var(--radius); } .p-newssingle__date { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .04em; } .p-newssingle__title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; } /* 一覧のバッジ（青地・白文字）に対して、帯の中では白地・青文字に反転する */ .c-badge--invert { background: var(--c-surface); color: var(--c-primary); } .p-newssingle__thumb { margin-top: var(--sp-4); border-radius: var(--radius); overflow: hidden; } .p-newssingle__thumb img { width: 100%; height: auto; } .p-newssingle__body { margin-top: var(--sp-4); } .p-newssingle__actions { display: flex; justify-content: center; margin-top: var(--sp-8); } @media (max-width: 767px) { /* SP は「バッジ＋日付」で1行、タイトルが次の行 */ .p-newssingle__head { gap: var(--sp-1) var(--sp-2); padding: var(--sp-3); } .p-newssingle__date { order: 2; font-size: var(--fs-base); } .p-newssingle__head .c-badge { order: 1; } .p-newssingle__title { order: 3; width: 100%; font-size: var(--fs-base); } } /* --- 記事本文の要素スタイル（エディタから入る見出し・リンク・画像） ----------- デザイン実測: h2 … 白パネル（幅いっぱい・角丸12px・左内余白32px） h3 … 左に水色の縦バー（10 x 30px / #7BCAEB） -------------------------------------------------------------------------- */ .p-newssingle__body h2 { margin-top: var(--sp-8); padding: var(--sp-2) var(--sp-4); background: var(--c-surface); border-radius: var(--radius); font-size: var(--fs-lg); line-height: 1.5; } .p-newssingle__body h3 { position: relative; margin-top: var(--sp-6); padding-left: 32px; font-size: var(--fs-lg); line-height: 1.5; } .p-newssingle__body h3::before { content: ""; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 10px; height: 30px; background: var(--c-news-bar); } .p-newssingle__body h4 { margin-top: var(--sp-4); font-size: var(--fs-base); } .p-newssingle__body p { line-height: 2; } .p-newssingle__body a { color: var(--c-primary); font-weight: 700; text-decoration: underline; } .p-newssingle__body img { border-radius: var(--radius); } /* エディタの画像ブロック・キャプション */ .p-newssingle__body figure { margin-block: var(--sp-6); } .p-newssingle__body figcaption { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-text-muted); text-align: center; } .p-newssingle__body ul, .p-newssingle__body ol { padding-left: 1.4em; } .p-newssingle__body li + li { margin-top: var(--sp-1); } @media (max-width: 767px) { .p-newssingle__body h2 { margin-top: var(--sp-6); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-base); } .p-newssingle__body h3 { padding-left: 22px; font-size: var(--fs-base); } .p-newssingle__body h3::before { left: 4px; width: 8px; height: 24px; } } /* ========================================================================== お問い合わせ（フォーム・完了） ========================================================================== フォーム本体は Contact Form 7 が出力する。 CF7 は

でラップした素のマークアップを出すため、 こちらの CSS は「CF7 の既定の出力」に当たるよう組んでいる。 行の構造は固定ページ本文で次のように書く想定:

お名前必須
[text* your-name placeholder "宮城　学"]
-------------------------------------------------------------------------- */ .p-contactform__empty { padding: var(--sp-4); background: var(--c-surface); border-radius: var(--radius); color: var(--c-text-muted); } /* デザイン実測: フォーム全体は 748px 幅で中央寄せ */ .p-contactform .wpcf7, .p-thanks__inner { max-width: 750px; margin-inline: auto; } /* --- 1行（ラベル＋入力） --------------------------------------------------- */ .c-form__row { display: grid; grid-template-columns: 245px 1fr; align-items: start; gap: var(--sp-3); margin-bottom: var(--sp-4); } .c-form__label { display: flex; align-items: center; gap: var(--sp-1); padding-top: .55em; font-weight: 700; } /* 必須バッジ。デザインは白地に青枠・青文字 */ .c-form__req { flex: 0 0 auto; padding: .15em .6em; background: var(--c-surface); border: 1px solid var(--c-primary); border-radius: 4px; color: var(--c-primary); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5; } /* --- 入力欄 --------------------------------------------------------------- CF7 は input を span.wpcf7-form-control-wrap で包む。 幅を親いっぱいに広げるため span も block にする。 -------------------------------------------------------------------------- */ .p-contactform .wpcf7-form-control-wrap { display: block; } .p-contactform input[type="text"], .p-contactform input[type="email"], .p-contactform input[type="tel"], .p-contactform input[type="url"], .p-contactform input[type="number"], .p-contactform input[type="date"], .p-contactform select, .p-contactform textarea { width: 100%; padding: .6em .9em; background: var(--c-surface); border: 1px solid var(--c-form-border); border-radius: 4px; font-size: var(--fs-sm); line-height: 1.6; } .p-contactform input::placeholder, .p-contactform textarea::placeholder { color: #AAA; } .p-contactform input[type="text"]:focus, .p-contactform input[type="email"]:focus, .p-contactform input[type="tel"]:focus, .p-contactform textarea:focus, .p-contactform select:focus { outline: 2px solid var(--c-primary); outline-offset: 1px; } /* デザイン実測: 1行入力は高さ41px、テキストエリアは約228px */ .p-contactform textarea { min-height: 228px; resize: vertical; } /* --- ラジオ・チェックボックス ----------------------------------------------- */ .p-contactform .wpcf7-radio, .p-contactform .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); padding-top: .55em; } .p-contactform .wpcf7-list-item { margin: 0; } .p-contactform .wpcf7-list-item label { display: inline-flex; align-items: center; gap: .4em; cursor: pointer; } .p-contactform input[type="radio"], .p-contactform input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-primary); } /* --- 同意文と送信ボタン ----------------------------------------------------- */ .c-form__consent { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--fs-sm); text-align: center; } .c-form__consent a { color: var(--c-primary); font-weight: 700; text-decoration: underline; } .c-form__submit { text-align: center; } /* CF7 の送信ボタンにサイト共通のボタン意匠を当てる */ .p-contactform input[type="submit"], .p-contactform button[type="submit"] { display: inline-flex; align-items: center; justify-content: center; min-width: 300px; padding: 0.9em 1.6em; background: var(--c-primary); color: var(--c-text-invert); border: 0; border-radius: 9999px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; cursor: pointer; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); } .p-contactform input[type="submit"]:hover, .p-contactform button[type="submit"]:hover { background: var(--c-primary-dark); transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); } /* 送信中のスピナーがボタンからはみ出さないように */ .p-contactform .wpcf7-spinner { vertical-align: middle; } /* --- CF7 のメッセージ表示 --------------------------------------------------- */ .p-contactform .wpcf7-response-output { margin: var(--sp-4) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-size: var(--fs-sm); } .p-contactform .wpcf7-not-valid-tip { margin-top: .3em; color: var(--c-red); font-size: var(--fs-xs); font-weight: 700; } .p-contactform input[aria-invalid="true"], .p-contactform textarea[aria-invalid="true"] { border-color: var(--c-red); } @media (max-width: 767px) { /* SP はラベルの下に入力欄が来る */ .c-form__row { grid-template-columns: 1fr; gap: var(--sp-1); margin-bottom: var(--sp-3); } .c-form__label { padding-top: 0; } .p-contactform .wpcf7-radio, .p-contactform .wpcf7-checkbox { padding-top: 0; } .c-form__consent { text-align: left; } .p-contactform input[type="submit"], .p-contactform button[type="submit"] { min-width: 0; width: 100%; } } /* --- 完了ページ ------------------------------------------------------------ */ .p-thanks { text-align: center; } /* デザイン実測 50x49px */ .p-thanks__check { width: 50px; height: 49px; margin-inline: auto; color: var(--c-primary); } .p-thanks__title { margin-top: var(--sp-4); color: var(--c-primary); font-size: var(--fs-xl); letter-spacing: .04em; } .p-thanks__text { margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 2; } .p-thanks__actions { display: flex; justify-content: center; margin-top: var(--sp-6); } @media (max-width: 767px) { .p-thanks__title { font-size: var(--fs-lg); } .p-thanks__text { text-align: left; } } /* ========================================================================== 404 ========================================================================== デザイン実測: 「404」は高さ98px・色 #7BCAEB（お知らせ本文 h3 のバーと同色）。 -------------------------------------------------------------------------- */ .p-404 { text-align: center; } .p-404__code { color: var(--c-news-bar); /* デザイン実測: 3桁で幅233px。8rem だと 250px でやや大きい */ font-size: 7.5rem; font-weight: 700; line-height: 1; letter-spacing: .06em; } .p-404__title { margin-top: var(--sp-3); color: var(--c-primary); font-size: var(--fs-xl); letter-spacing: .04em; } .p-404__text { margin-top: var(--sp-2); font-size: var(--fs-sm); line-height: 2; } .p-404__actions { display: flex; justify-content: center; margin-top: var(--sp-4); } @media (max-width: 767px) { .p-404__code { font-size: 5.5rem; } .p-404__title { font-size: var(--fs-lg); } } /* ========================================================================== アニメーション ========================================================================== */ /* * スクロールに合わせたフェードイン。 * .has-reveal は JS が動いたときだけ html に付くので、JS 無効時や * IntersectionObserver 非対応のブラウザでは何も隠れない。 * 「視差効果を減らす」設定の環境では JS 側で機能ごと止めている。 */ .has-reveal .js-reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1); /* 同じ並びの2つ目以降は少しずつ遅らせる（--reveal-i は JS が付ける） */ transition-delay: calc(var(--reveal-i, 0) * .09s); } .has-reveal .js-reveal.is-inview { opacity: 1; transform: none; } /* --- ヒーロー写真のゆっくりした上下動 --------------------------------------- */ /* 写真と輪がずれないよう、入れ物ごとゆっくり上下させる */ .p-hero__photo, .p-pagehero__photo { animation: manahome-float 7s ease-in-out infinite alternate; } @keyframes manahome-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } } /* --- ヒーローの街並みイラストがふわっと出る --------------------------------- */ .p-hero__illust img, .p-pagehero__illust img { animation: manahome-townscape 1.2s cubic-bezier(.22, .61, .36, 1) both .4s; } @keyframes manahome-townscape { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* --- カードのホバー --------------------------------------------------------- */ .c-card, .c-office-card, .c-pointcard { transition: transform .3s ease, box-shadow .3s ease; } .c-card:hover, .c-office-card:hover, .c-pointcard:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .08); } /* 写真つきカードは、ホバーで写真だけ少し寄る */ .c-office-card__thumb, .c-card__thumb { overflow: hidden; } .c-office-card__thumb img, .c-card__thumb img { transition: transform .5s ease; } .c-office-card:hover .c-office-card__thumb img, .c-card:hover .c-card__thumb img { transform: scale(1.05); } /* --- お知らせの行：ホバーで下線と背景がつく -------------------------------- */ .c-newsrows__link { transition: background-color .25s ease; border-radius: 8px; } .c-newsrows__link:hover { background: var(--c-blue-pale); opacity: 1; } .c-newsrows__title { transition: color .25s ease; } .c-newsrows__link:hover .c-newsrows__title { color: var(--c-primary-dark); } /* --- ハンバーガーメニュー：開いたときに項目が順に出る ---------------------- */ @media (max-width: 900px) { .is-nav-open .l-header__menu > li { animation: manahome-menu-in .4s cubic-bezier(.22, .61, .36, 1) both; } .is-nav-open .l-header__menu > li:nth-child(1) { animation-delay: .04s; } .is-nav-open .l-header__menu > li:nth-child(2) { animation-delay: .10s; } .is-nav-open .l-header__menu > li:nth-child(3) { animation-delay: .16s; } .is-nav-open .l-header__menu > li:nth-child(4) { animation-delay: .22s; } .is-nav-open .l-header__menu > li:nth-child(n+5) { animation-delay: .28s; } } @keyframes manahome-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* --- ページトップボタン：ホバーで軽く跳ねる -------------------------------- */ .c-pagetop { transition: transform .25s ease; } .c-pagetop:hover { transform: translateY(-4px); } /* --- 1日の流れ：時計が順にふわっと出る ------------------------------------- */ /* SP は円を translate で中央に置いているので、拡大の動きは PC だけにする */ @media (min-width: 901px) { .has-reveal .c-panel.is-inview .c-timeline__mark img { animation: manahome-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; } .has-reveal .c-panel.is-inview .c-timeline__item:nth-child(1) .c-timeline__mark img { animation-delay: .10s; } .has-reveal .c-panel.is-inview .c-timeline__item:nth-child(2) .c-timeline__mark img { animation-delay: .18s; } .has-reveal .c-panel.is-inview .c-timeline__item:nth-child(3) .c-timeline__mark img { animation-delay: .26s; } .has-reveal .c-panel.is-inview .c-timeline__item:nth-child(4) .c-timeline__mark img { animation-delay: .34s; } .has-reveal .c-panel.is-inview .c-timeline__item:nth-child(5) .c-timeline__mark img { animation-delay: .42s; } .has-reveal .c-panel.is-inview .c-timeline__item:nth-child(6) .c-timeline__mark img { animation-delay: .50s; } .has-reveal .c-panel.is-inview .c-timeline__item:nth-child(n+7) .c-timeline__mark img { animation-delay: .58s; } } @keyframes manahome-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } /* --- 入居までの流れ：番号が順に出る ---------------------------------------- */ .has-reveal .c-flow__item.is-inview .c-flow__num { animation: manahome-pop .45s cubic-bezier(.34, 1.56, .64, 1) both .1s; } /* --- SP の追従 CTA：ふきだしがゆっくり呼吸する ------------------------------ */ .l-header__mobilecta-bubble { animation: manahome-bubble 2.4s ease-in-out infinite alternate; } /* 中央寄せの translateX(-50%) を打ち消さないよう、動きにも含める */ @keyframes manahome-bubble { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -3px); } } /* ========================================================================== ヒーローのあしらい（図形を1枚ずつ配置） ========================================================================== 位置と大きさは、すべて Figma 実測値を「写真の枠」に対する % に直したもの。 写真の枠は実測どおりに置いてあるので、この % のままなら画面幅が変わっても 図形どうしの位置関係は崩れない。 トップ PC 写真 x789-1224.5 / y130-654.5 （435.5 x 524.5） トップ SP 写真 x200.75-421.25 / y88.75-309.25（直径 220.5） 下層 PC 写真 x767-1204 / y124-532 （437 x 408） 下層 SP 写真 x202-448 / y111-357 （直径 246） -------------------------------------------------------------------------- */ .c-decor { position: absolute; inset: 0; pointer-events: none; } .c-decor__item { position: absolute; display: block; /* ベースのリセットで max-width:100% が効くため、写真幅で頭打ちにならないよう解除 */ max-width: none; height: auto; } /* --- トップ（PC） ---------------------------------------------------------- */ .c-decor--top .c-decor__item--01 { left: -5.05%; top: -2.00%; width: 16.76%; } .c-decor--top .c-decor__item--02 { left: 103.79%; top: -3.24%; width: 25.95%; } .c-decor--top .c-decor__item--03 { left: -29.39%; top: 12.49%; width: 16.30%; } .c-decor--top .c-decor__item--06 { left: -36.97%; top: 50%; width: 13.32%; } .c-decor--top .c-decor__item--04 { left: 120.55%; top: 49.29%; width: 8.73%; } .c-decor--top .c-decor__item--16 { left: -16.07%; top: 90.85%; width: 14.93%; } .c-decor--top .c-decor__item--05 { left: 106.93%; top: 85.89%; width: 17.91%; } /* --- 下層ページ（PC） ------------------------------------------------------- */ .c-decor--page .c-decor__item--01 { left: -0.23%; top: -7.84%; width: 16.70%; } .c-decor--page .c-decor__item--08 { left: -31.07%; top: 13%; width: 27.69%; } .c-decor--page .c-decor__item--11 { left: 115.10%; top: 6.62%; width: 22.43%; } .c-decor--page .c-decor__item--09 { left: 112.36%; top: 49.02%; width: 16.70%; } .c-decor--page .c-decor__item--10 { left: -26.32%; top: 56.85%; width: 10.30%; } /* SP 専用の図形は PC では出さない */ .c-decor--page .c-decor__item--12, .c-decor--page .c-decor__item--13, .c-decor--page .c-decor__item--14, .c-decor--page .c-decor__item--15 { display: none; } @media (max-width: 900px) { /* --- トップ（SP）。写真の枠は 213.5 x 256.5px（x192.5-406 / y85.5-342） --- */ .c-decor--top .c-decor__item--01 { left: 4.75%; top: -6.24%; width: 15.46%; } .c-decor--top .c-decor__item--02 { left: 63.51%; top: 118.21%; width: 18.74%; } .c-decor--top .c-decor__item--03 { left: 34.19%; top: 120.86%; width: 13.58%; } .c-decor--top .c-decor__item--06 { left: 91.80%; top: 102.22%; width: 9.37%; } /* SP デザインには出てこない図形は隠す */ .c-decor--top .c-decor__item--04, .c-decor--top .c-decor__item--05, .c-decor--top .c-decor__item--16 { display: none; } /* --- 下層ページ（SP）。写真の枠は 222.7 x 267.5px（x209.5-432.2 / y91-358.5） --- */ .c-decor--page .c-decor__item--01 { left: -5.16%; top: -4.86%; width: 16.17%; } .c-decor--page .c-decor__item--15 { left: -72.52%; top: 4.49%; width: 9.88%; display: block; } .c-decor--page .c-decor__item--12 { left: -26.27%; top: 60.93%; width: 15.27%; display: block; } .c-decor--page .c-decor__item--14 { left: -41.53%; top: 56.51%; width: 9.43%; display: block; } .c-decor--page .c-decor__item--09, .c-decor--page .c-decor__item--10, .c-decor--page .c-decor__item--11 { display: none; } } @media screen and (max-width: 480px){ .c-decor--page .c-decor__item--13 { left: -93.62%; top: -10.84%; width: 17.51%; display: block; } .c-decor--page .c-decor__item--08{ display: none; } } /* --- ゆらぎ：図形がその場で左右に転がる。回転を移動に連動させ、 端で少し止まる効かせ方（cubic-bezier）にして、ふわふわではなくカクッと動かす。 周期・振れ幅・開始をひとつずつ変えて、そろって動かないようにしている。 --- */ .c-decor__item { /* 図形の中心を軸に回す */ transform-origin: 50% 50%; animation-timing-function: cubic-bezier(.85, 0, .15, 1); animation-iteration-count: infinite; animation-direction: alternate; } .c-decor__item--01 { animation-name: manahome-roll-s; animation-duration: 3.4s; } .c-decor__item--02 { animation-name: manahome-roll-m; animation-duration: 4.6s; animation-delay: .40s; } .c-decor__item--03 { animation-name: manahome-roll-l; animation-duration: 4.0s; animation-delay: .15s; } .c-decor__item--04 { animation-name: manahome-roll-s; animation-duration: 2.8s; animation-delay: .70s; } .c-decor__item--05 { animation-name: manahome-roll-m; animation-duration: 4.2s; animation-delay: .25s; } .c-decor__item--06 { animation-name: manahome-roll-l; animation-duration: 3.2s; animation-delay: .55s; } .c-decor__item--08 { animation-name: manahome-roll-m; animation-duration: 4.8s; animation-delay: .10s; } .c-decor__item--09 { animation-name: manahome-roll-l; animation-duration: 3.8s; animation-delay: .80s; } .c-decor__item--10 { animation-name: manahome-roll-s; animation-duration: 3.0s; animation-delay: .30s; } .c-decor__item--11 { animation-name: manahome-roll-m; animation-duration: 4.4s; animation-delay: .65s; } .c-decor__item--12 { animation-name: manahome-roll-s; animation-duration: 2.6s; animation-delay: .45s; } .c-decor__item--13 { animation-name: manahome-roll-m; animation-duration: 4.1s; animation-delay: .20s; } .c-decor__item--14 { animation-name: manahome-roll-s; animation-duration: 2.4s; animation-delay: .75s; } .c-decor__item--15 { animation-name: manahome-roll-s; animation-duration: 3.6s; animation-delay: .50s; } .c-decor__item--16 { animation-name: manahome-roll-l; animation-duration: 4.5s; animation-delay: .35s; } /* 移動量と回転量を連動させると「転がっている」ように見える。3段階で使い分ける。 */ @keyframes manahome-roll-s { from { transform: translateX(-5px) rotate(-14deg); } 50% { transform: translateX(0) rotate(0deg); } to { transform: translateX(5px) rotate(14deg); } } @keyframes manahome-roll-m { from { transform: translateX(-8px) rotate(-18deg); } 50% { transform: translateX(0) rotate(0deg); } to { transform: translateX(8px) rotate(18deg); } } @keyframes manahome-roll-l { from { transform: translateX(-12px) rotate(-22deg); } 50% { transform: translateX(0) rotate(0deg); } to { transform: translateX(12px) rotate(22deg); } } /* -------------------------------------------------------------------------- OS の「視差効果を減らす／アニメーション効果 OFF」に従って動きを止める。 個々の指定に条件を書かず、ここで一括して打ち消している。 html に .is-motion が付いているときだけは止めない（確認用の逃がし道）。 -------------------------------------------------------------------------- */ /*@media (prefers-reduced-motion: reduce) { html:not(.is-motion) *, html:not(.is-motion) *::before, html:not(.is-motion) *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } }*/ /* -------------------------------------------------------------------------- 360px 未満の端末（iPhone SE 以前など）向けの詰め。 デザインは 402px 想定なので、それより狭いときだけはみ出さないよう抑える。 -------------------------------------------------------------------------- */ @media (max-width: 379px) { /* 飾り枠つきの見出しは fit-content で内容幅になるため、画面幅で頭打ちにする */ .c-pointhead { max-width: 100%; } .c-pointhead__title { overflow-wrap: anywhere; } /* 電話番号は nowrap なので、狭いときは文字を小さくして収める */ .l-footer__tel { padding-inline: var(--sp-2); font-size: var(--fs-xl); } }