@charset "utf-8"; /* ============================================================================= * 総合TOP リニューアル（確認版 /index2.html）第4版 /css/top2.css　2026-10-16 * 今のTOPの素材とイメージ（女性・げんちょくん・水色とピンクの丸・黄色いボタン・赤い金額・青 #0065cc・オレンジの見積り枠）で * メイン画像から組み直した。クラスは t4- で始まるものだけ。影は使わない。左だけ太い線は使わない。@media は最後。 * ========================================================================== */ .t4 { --blue: #0065cc; --sky: #32b7fc; --sky2: #28d4fd; --pink: #ff7de8; --pinkc: #ffc3fc; --red: #e00; --ink: #333; --line: #d9f1ff; display: block; color: var(--ink); font-size: 16px; line-height: 1.7; overflow: hidden; } .t4 *, .t4 *::before, .t4 *::after { box-sizing: border-box; } .t4 ul, .t4 ol { margin: 0; padding: 0; list-style: none; } .t4 li { margin: 0; padding: 0; } .t4 li::before { content: none; } .t4 h1, .t4 h2, .t4 h3, .t4 p { margin: 0; padding: 0; background: none; border: 0; } .t4 h2::before, .t4 h2::after { content: none !important; } .t4 img { max-width: 100%; height: auto; } .t4 a { text-decoration: none; } .t4 .spn-i { width: 20px; height: 20px; flex: none; } .t4-in { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding:20px; } /* ---------- ファーストビュー ---------- */ .t4-hero { position: relative; padding: 44px 0 0; background: linear-gradient(180deg, #e8f7ff 0%, #f6fcff 70%, #fff 100%); overflow: hidden; } .t4-hero__c { position: absolute; z-index: 0; border-radius: 50%; } .t4-hero__c1 { top: -110px; left: -110px; width: 260px; height: 260px; background: var(--sky); opacity: .85; } .t4-hero__c2 { top: 26px; right: 3%; width: 110px; height: 110px; background: var(--pinkc); } .t4-hero__c3 { top: 250px; right: 1%; width: 60px; height: 60px; background: #ff9ef2; opacity: .7; } .t4-hero__c4 { bottom: 130px; left: 46%; width: 46px; height: 46px; background: var(--sky2); opacity: .5; } .t4-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: center; padding-bottom: 26px; } .t4-hero__txt { padding: 0; } .t4-hero__tag { display: inline-flex; align-items: center; gap: 8px; padding: 3px 16px 3px 6px; border-radius: 40px; background: #fff; color: var(--blue); font-size: 13.5px; font-weight: bold; } .t4-hero__tag img { width: 52px; height: auto; } .t4 .t4-hero__h { margin-top: 0 !important; font-size: 30px !important; font-weight: 900; line-height: 1.5; color: #222 !important; } .t4-hero__h em { font-style: normal; color: var(--blue); background: linear-gradient(transparent 70%, #fff36b 70%); } .t4-hero__pt { display: flex; gap: 10px; margin-top: 16px !important; } .t4-hero__pt li { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 14px; background: #fff; } .t4-hero__pt img { width: 28px; height: 32px; } .t4-hero__ic { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sky); color: #fff; } .t4 .t4-hero__ic .spn-i { width: 17px; height: 17px; } .t4-hero__pt b { font-size: 13px; line-height: 1.4; } .t4-search { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px; border: 2px solid var(--sky); border-radius: 14px; background: #fff; } .t4-search__l { display: flex; align-items: center; gap: 6px; flex: none; padding: 0 6px; font-size: 14px; font-weight: bold; color: var(--blue); white-space: nowrap; } .t4-search select { flex: none; width: 170px; height: 42px; margin: 0; padding: 0 8px; border: 1px solid #c9dfee; border-radius: 8px; background: #fff; font-size: 14px; color: var(--ink); } .t4-search input { flex: 1; min-width: 0; height: 42px; margin: 0; padding: 0 10px; border: 1px solid #c9dfee; border-radius: 8px; font-size: 15px; } .t4-search button { flex: none; height: 42px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--blue); color: #fff; font: inherit; font-size: 15px; font-weight: bold; cursor: pointer; } .t4-search button:hover { background: #004f9f; } .t4-hero__cta { display: flex; gap: 12px; margin-top: 12px; } .t4-cta-m { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 8px 12px; border: 3px solid #ff6600; border-radius: 12px; background: #fff; color: #ff6600 !important; font-size: 19px; font-weight: bold; line-height: 1.3; } .t4-cta-m small { font-size: 12.5px; } .t4-cta-m:hover { background: #fff6ef; } .t4-cta-t { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; padding: 6px 12px; border-radius: 12px; background: rgba(255, 255, 255, .92); color: var(--ink) !important; line-height: 1.25; } .t4-cta-t small { font-size: 12.5px; font-weight: bold; } .t4-cta-t b { font-size: 27px; color: var(--red); letter-spacing: .02em; } .t4-cta-t span { font-size: 12px; } /* 女性の写真は丸い枠の中に収める */ .t4-hero__ph { position: relative; width: 330px; height: 330px; margin: 0 auto; } .t4-hero__ph::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #d4f1ff 0%, #8fd8fb 100%); } .t4-hero__girl { position: absolute; left: 50%; bottom: 0; z-index: 1; width: 240px; height: auto; transform: translateX(-48%); clip-path: circle(165px at 50% calc(100% - 165px)); } .t4-hero__gen { position: absolute; left: -30px; bottom: -6px; z-index: 2; width: 130px; height: 130px; } .t4-hero__bubble { position: absolute; top: 6px; right: -26px; z-index: 2; padding: 10px 14px; border-radius: 18px; background: #fff; color: var(--blue); font-size: 14px; font-weight: 900; line-height: 1.4; text-align: center; } .t4-hero__bubble::after { content: ""; position: absolute; left: 18px; bottom: -9px; border-width: 10px 6px 0; border-style: solid; border-color: #fff transparent transparent; } /* 商材タイルの帯 */ .t4-strip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 8px; margin-top: -6px; padding: 14px; border-radius: 22px 22px 0 0; background: #fff; } .t4-strip a { display: flex; flex-direction: column; align-items: center; height: 100%; padding: 8px 2px 10px; border: 2px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); text-align: center; transition: border-color .2s, transform .2s; } .t4-strip a:hover { border-color: var(--sky); transform: translateY(-3px); } .t4-strip img { width: 60px; height: 60px; object-fit: contain; } .t4-strip b { margin-top: 4px; font-size: 12.5px; line-height: 1.3; } .t4-strip span { margin-top: 2px; font-size: 12px; font-weight: bold; color: var(--red); } /* 実績の数字 */ .t4-kpi { padding: 10px 0 30px; } .t4-kpi ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .t4-kpi li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; padding: 16px 8px; border-radius: 60px; background: #e6f6ff; text-align: center; } .t4-kpi li:nth-child(even) { background: #fff0fe; } .t4-kpi b { font-size: 32px; font-weight: 900; line-height: 1.2; color: var(--red); } .t4-kpi small { margin-left: 3px; font-size: 14px; font-weight: bold; } .t4-kpi span { width: 100%; font-size: 13.5px; color: #555; } .t4-kpi p { margin-top: 8px !important; font-size: 12px; color: #888; text-align: right; } /* ---------- 共通 ---------- */ .t4-sec { position: relative; padding: 70px 0; } .t4-sec--blue { background: #e9f7ff; } .t4-sec--pink { background: #fff1fe; } .t4-deco::before, .t4-deco::after { content: ""; position: absolute; z-index: 1; border-radius: 50%; } .t4-deco::before { top: -70px; left: -80px; width: 230px; height: 230px; background: var(--sky); opacity: .3; } .t4-deco::after { bottom: -40px; right: 5%; width: 120px; height: 120px; background: var(--pinkc); opacity: .75; } .t4-deco--r::before { left: auto; right: -80px; background: var(--sky2); } .t4-deco--r::after { right: auto; left: 3%; background: var(--sky); opacity: .3; bottom: 12%; } .t4-hd { margin: 0 0 30px; text-align: center; } .t4-hd__en { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; font-weight: bold; letter-spacing: .25em; color: var(--sky); } .t4-hd__en img { width: 60px; height: 60px; } .t4 .t4-hd__h { margin-top: 2px !important; font-size: 34px !important; font-weight: 900; line-height: 1.35; color: var(--blue) !important; } .t4-hd__s { max-width: 880px; margin: 10px auto 0 !important; font-size: 15px; color: #555; } .t4-hd__s b { color: var(--red); } .t4-more { margin-top: 30px !important; text-align: center; } .t4-more .btn100 { min-width: 380px; } /* ---------- 商材から探す ---------- */ .t4-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .t4-cat { display: flex; flex-direction: column; border-radius: 18px; background: #fff; border: 1px solid #e3eef6; overflow: hidden; transition: border-color .2s, transform .2s; } .t4-cat:hover { border-color: var(--sky); transform: translateY(-3px); } .t4-cat__a { display: flex; flex-direction: column; align-items: center; padding: 0 0 14px; color: var(--ink); text-align: center; } .t4-cat__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 140px; background: #eaf7ff; } .t4-cat.is-p .t4-cat__ph { background: #fff1fd; } .t4-cat__ph img { width: 110px; height: 110px; object-fit: contain; transition: transform .2s; } .t4-cat:hover .t4-cat__ph img { transform: scale(1.06); } .t4-cat__n { margin-top: 12px; padding: 0 10px; font-size: 16px; font-weight: bold; line-height: 1.35; } .t4-cat__a:hover .t4-cat__n { color: var(--blue); } .t4-cat__p { display: flex; align-items: baseline; gap: 3px; margin-top: 4px; color: var(--red); font-weight: bold; } .t4-cat__p small { font-size: 12px; color: #666; font-weight: normal; } .t4-cat__p small:last-child { color: var(--red); font-weight: bold; } .t4-cat__p b { font-size: 22px; letter-spacing: .01em; } .t4 .t4-cat__f { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 10px; margin-top: auto !important; padding: 10px 12px 12px !important; border-top: 1px solid #edf3f8; font-size: 12px; } .t4-cat__f a { color: #557; } .t4-cat__f a:first-child { color: var(--blue); font-weight: bold; } .t4-cat__f a:hover { color: var(--blue); text-decoration: underline; } /* ---------- 人気ランキング ---------- */ .t4-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 18px; } .t4-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px 0 8px; border: 2px solid var(--line); border-radius: 22px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: bold; cursor: pointer; } .t4-tabs button img { width: 28px; height: 28px; object-fit: contain; } .t4-tabs button[aria-selected="true"] { border-color: var(--blue); background: var(--blue); color: #fff; } .t4-tabs button[aria-selected="true"] img { border-radius: 50%; background: #fff; } .t4-rank ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .t4-rank li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 18px 18px; border-radius: 22px; background: #fff; text-align: center; } .t4-rank__no { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: #c9a227; color: #fff; font-size: 13px; font-weight: bold; } .t4-rank__no b { font-size: 24px; line-height: 1; } .t4-rank li.is-2 .t4-rank__no { background: #9aa6b2; } .t4-rank li.is-3 .t4-rank__no { background: #c07a43; } .t4-rank__ph img { display: block; width: 180px; height: 180px; object-fit: contain; } .t4-rank__mk { margin-top: 8px !important; font-size: 13px; font-weight: bold; color: var(--blue); } .t4-rank__n { font-size: 17px; font-weight: bold; word-break: break-all; } .t4-rank__n a { color: var(--ink); } .t4-rank__n a:hover { color: var(--blue); text-decoration: underline; } .t4-rank__d { margin-top: 2px !important; font-size: 12.5px; color: #666; line-height: 1.5; } .t4-rank__p { margin-top: auto !important; padding-top: 10px; font-size: 13px; font-weight: bold; color: var(--red); } .t4-rank__p b { margin: 0 2px 0 6px; font-size: 24px; } .t4-rank__f { margin-top: 14px !important; font-size: 13.5px; color: #555; text-align: center; } .t4-rank__f a { margin-left: 10px; color: var(--blue); font-weight: bold; text-decoration: underline; } /* ---------- 選ばれる理由 ---------- */ .t4-reason { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .t4-reason li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px 20px 22px; border-radius: 22px; background: #f6f9fb; text-align: center; } .t4-reason img { width: 168px; height: 140px; border-radius: 14px; object-fit: cover; } .t4-reason__n { position: absolute; top: 12px; left: 16px; font-size: 26px; font-weight: 900; color: var(--sky); } .t4-reason h3 { margin-top: 14px !important; font-size: 18px; color: var(--blue); } .t4-reason p { margin: 8px 0 14px !important; font-size: 14px; color: #444; text-align: left; } .t4-reason a { margin-top: auto; padding: 8px 24px; border-radius: 50px; background: #313131; color: #fff !important; font-size: 13.5px; font-weight: bold; } .t4-reason a:hover { background: var(--blue); } /* ---------- 創業35年・会社の歩み ---------- */ .t4-story { position: relative; padding: 70px 0; background: linear-gradient(135deg, #0b5cad 0%, #1f8ee0 100%); color: #fff; overflow: hidden; } .t4-story::before { content: ""; position: absolute; top: -80px; right: -60px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .08); } .t4-story::after { content: ""; position: absolute; bottom: -100px; left: 30%; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 195, 252, .18); } .t4-story__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; } .t4-story__35 { display: block; width: 138px; height: auto; padding: 8px 12px; border-radius: 14px; } .t4 .t4-story__h { margin-top: 18px !important; font-size: 28px !important; font-weight: 900; line-height: 1.5; color: #fff !important; } .t4 .t4-story__l p { margin-top: 14px !important; font-size: 15px; line-height: 1.9; color: #e3f2ff; } .t4-story__a { display: inline-block; margin-top: 20px; padding: 10px 28px; border-radius: 40px; background: #ffef00; color: #333 !important; font-weight: bold; } .t4-story__a:hover { background: #fff; } .t4 .t4-story__t { position: relative; padding-left: 28px; } .t4 .t4-story__t::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: rgba(255, 255, 255, .45); } .t4 .t4-story__t li { position: relative; display: flex; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); } .t4 .t4-story__t li::after { content: ""; position: absolute; left: -26px; top: 17px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--pinkc); } .t4-story__t b { flex: none; width: 62px; font-size: 20px; color: #ffef00; white-space: nowrap; } .t4-story__t span { font-size: 14.5px; } /* ---------- 施工事例 ---------- */ .t4-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .t4-cases a { display: flex; flex-direction: column; height: 100%; border-radius: 18px; background: #fff; color: var(--ink); overflow: hidden; transition: transform .2s; } .t4-cases a:hover { transform: translateY(-3px); } .t4-case__ph { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #fff; } .t4-case__ph > span { position: relative; display: block; aspect-ratio: 4 / 3; background: #eef3f7; overflow: hidden; } .t4-case__ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .t4-case__ph i { position: absolute; left: 0; bottom: 0; padding: 2px 10px; background: rgba(51, 51, 51, .75); color: #fff; font-size: 11px; font-style: normal; font-weight: bold; letter-spacing: .08em; } .t4-case__a i { left: auto; right: 0; background: var(--blue); } .t4-case__ar { position: absolute; left: 50%; top: 50%; z-index: 1; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; } .t4-case__ar::after { content: ""; position: absolute; left: 8px; top: 10px; width: 8px; height: 8px; border-top: 3px solid var(--sky); border-right: 3px solid var(--sky); transform: rotate(45deg); } .t4-case__in { display: flex; flex-direction: column; flex: 1; padding: 12px 16px 14px; } .t4-case__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .t4-case__top em { padding: 0 10px; border-radius: 12px; background: #e6f6ff; color: var(--blue); font-size: 12px; font-style: normal; font-weight: bold; } .t4-case__top strong { padding: 0 8px; border-radius: 12px; background: #ff3399; color: #fff; font-size: 11px; } .t4-case__top small { width: 100%; font-size: 12px; color: #888; } .t4-case__md { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; } .t4-case__md > span { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; word-break: break-all; color: #666; } .t4-case__md > span.is-a { color: var(--ink); font-weight: bold; } .t4-case__md small { flex: none; width: 42px; font-size: 11px; color: #999; font-weight: normal; } .t4-case__md > span.is-a small { color: var(--blue); } .t4-case__p { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--red); font-weight: bold; } .t4-case__p small { margin-right: auto; color: #888; font-size: 11.5px; font-weight: normal; } .t4-case__p b { font-size: 22px; } .t4-area { margin-top: 24px; padding: 18px 22px; border-radius: 20px; background: #fff; } .t4-area__h { display: flex; align-items: center; gap: 6px; margin-bottom: 10px !important; font-weight: bold; color: var(--blue); } .t4-area ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .t4-area a { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 14px; border: 1px solid #c9e6f8; border-radius: 30px; color: var(--ink); font-weight: bold; } .t4-area a small { font-size: 12px; font-weight: normal; color: #777; } .t4-area a:hover { border-color: var(--blue); color: var(--blue); } /* ---------- お客様の声 ---------- */ .t4-vsum { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 26px; padding: 22px 28px; border-radius: 24px; background: #fff; } .t4-vsum__big { display: flex; flex-direction: column; align-items: center; padding-right: 24px; border-right: 1px solid #f1dcef; text-align: center; } .t4-vsum__big b { font-size: 54px; font-weight: 900; line-height: 1; color: var(--red); } .t4-vsum__st { margin-top: 6px; color: #f5a300; font-size: 22px; letter-spacing: 3px; } .t4-vsum__big small { margin-top: 4px; font-size: 13px; color: #666; } .t4-vsum__l { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .t4-vsum__l li { display: flex; flex-direction: column; align-items: center; padding: 10px 6px; border-radius: 14px; background: #fff6fe; text-align: center; } .t4-vsum__l span { font-size: 13px; font-weight: bold; } .t4-vsum__l b { font-size: 22px; color: var(--red); line-height: 1.3; } .t4-vsum__l small { font-size: 11px; color: #888; } .t4-vcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .t4-vcards li { position: relative; display: flex; flex-direction: column; padding: 22px 22px 18px; border-radius: 22px; background: #fff; } .t4-vcards__q { position: absolute; top: -8px; right: 18px; font-family: Georgia, serif; font-size: 80px; line-height: 1; color: #d4efff; } .t4-vcards__st { color: #f5a300; font-size: 16px; letter-spacing: 2px; } .t4-vcards__st i { font-style: normal; color: #e3e3e3; } .t4-vcards__t { margin-top: 6px !important; font-size: 16.5px; font-weight: bold; line-height: 1.45; color: var(--ink); } .t4-vcards__b { margin-top: 8px !important; font-size: 14px; color: #555; } .t4-vcards__w { display: flex; align-items: center; gap: 8px; margin-top: auto !important; padding-top: 14px; border-top: 1px dashed #eadcea; font-size: 12.5px; } .t4-vcards__w img { width: 34px; height: 34px; border-radius: 50%; } .t4-vcards__w span { display: flex; flex-direction: column; line-height: 1.35; } .t4-vcards__w small { color: #888; font-size: 11.5px; } .t4-vcards__w em { flex: none; margin-left: auto; padding: 1px 10px; border-radius: 12px; background: #e6f6ff; color: var(--blue); font-style: normal; font-size: 11.5px; font-weight: bold; white-space: nowrap; } /* ---------- マンション・流れ ---------- */ .t4-condo { display: flex; align-items: center; gap: 24px; max-width: 980px; margin: 0 auto 50px; padding: 22px 28px; border-radius: 28px; background: #fff url(https://www.gasspec.jp/images/text_haikei01.webp) center / cover; } .t4-condo img { flex: none; width: 140px; height: 140px; border: 4px solid #6ed0ff; border-radius: 50%; } .t4-condo__h { font-size: 19px; font-weight: bold; color: var(--blue); } .t4-condo__h b { font-size: 26px; color: var(--red); } .t4-condo p + p { margin-top: 4px !important; font-size: 14.5px; } .t4-condo__f { display: flex; gap: 8px; margin-top: 10px; } .t4-condo__f input { flex: 1; height: 46px; margin: 0; padding: 0 12px; border: 2px solid #6ed0ff; border-radius: 10px; font-size: 16px; } .t4-condo__f button { height: 46px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--blue); color: #fff; font: inherit; font-weight: bold; cursor: pointer; } .t4-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .t4-flow li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px 18px 20px; border: 2px solid var(--line); border-radius: 22px; background: #fff; text-align: center; } .t4-flow li + li::before { content: "" !important; position: absolute; left: -14px; top: 46px; border-width: 9px 0 9px 10px; border-style: solid; border-color: transparent transparent transparent var(--sky); } .t4-flow li span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sky); color: #fff; font-size: 24px; font-weight: bold; } .t4-flow li:nth-child(even) span { background: var(--pink); } .t4-flow li b { margin-top: 10px; font-size: 18px; color: var(--blue); } .t4-flow li small { margin-top: 6px; font-size: 13px; color: #555; } .t4-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 24px !important; } .t4-links a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; background: #f3fbff; color: var(--ink); font-size: 14px; font-weight: bold; text-align: center; } .t4-links a .spn-i { width: 26px; height: 26px; color: var(--blue); } .t4-links a:hover { background: #e2f3ff; color: var(--blue); } /* ---------- FAQ ---------- */ .t4-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; max-width: 1040px; margin: 0 auto; align-items: start; } .t4-faq details { border-radius: 16px; background: #fff; } .t4-faq summary { position: relative; padding: 16px 44px 16px 56px; font-size: 15.5px; font-weight: bold; cursor: pointer; list-style: none; } .t4-faq summary::-webkit-details-marker { display: none; } .t4-faq summary::before { content: "Q"; position: absolute; left: 14px; top: 50%; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--sky); color: #fff; font-size: 15px; } .t4-faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 3px solid var(--sky); border-bottom: 3px solid var(--sky); transform: rotate(45deg); } .t4-faq details[open] summary::after { margin-top: -2px; transform: rotate(-135deg); } .t4-faq details p { padding: 0 22px 18px 56px; font-size: 14.5px; color: #444; } .t4-faq details p a { color: var(--blue); text-decoration: underline; } /* ---------- サービス・お知らせ ---------- */ .t4-annai { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .t4-annai a { position: relative; display: block; border-radius: 18px; overflow: hidden; color: #fff; } .t4-annai img { display: block; width: 100%; aspect-ratio: 256 / 179; object-fit: cover; transition: transform .3s; } .t4-annai a:hover img { transform: scale(1.05); } .t4-annai b { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 30px 14px 10px; background: linear-gradient(transparent, rgba(0, 40, 90, .78)); font-size: 15px; } .t4-annai b::after { content: ""; flex: none; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); } .t4-news { max-width: 820px; margin: 40px auto 0; padding: 16px 24px; border-radius: 20px; background: #fff0fe; } .t4 .t4-news__h { display: inline-block; margin-bottom: 6px !important; padding: 2px 18px; border-radius: 20px; background: var(--sky); color: #fff; font-weight: bold; font-size: 14px; } .t4-news .newsArea_01, .t4-news #news01 { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; } .t4-news .oshirase { display: none !important; } .t4-news .news_01 { max-width: none !important; margin: 0 !important; border: 0 !important; } /* 画面が狭いとき（スマホ版の本格的なデザインは次の段階。崩れない最低限） */ /* ===== 交換できる住宅設備：写真の枠は角を丸く・メーカーロゴ（2026-10-16 ユーザー指示） ===== */ .t4-cat__ph { align-self: stretch; width: auto; margin: 10px 10px 0; border-radius: 14px; overflow: hidden; } .t4 .t4-cat__f { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto !important; padding: 10px 12px 12px !important; border-top: 1px solid #edf3f8; } .t4-cat__sc { align-self: center; font-size: 12px; font-weight: bold; color: var(--blue); } .t4-cat__sc:hover { text-decoration: underline; } .t4 .t4-cat__mk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none; } .t4 .t4-cat__mk li { margin: 0; padding: 0; list-style: none; } .t4 .t4-cat__mk li::before { content: none; } .t4-cat__mk a { display: flex; align-items: center; justify-content: center; height: 34px; padding: 0 6px; border: 1px solid #e3ebf2; border-radius: 8px; background: #fff; transition: border-color .15s; } .t4-cat__mk a:hover { border-color: var(--sky); } .t4-cat__mk .spn-logo { display: block; width: min(100%, calc(16px * var(--lw, 4))) !important; max-width: 100% !important; height: auto !important; max-height: none !important; margin: 0 !important; } /* ランキングのタブは1行に収める（改行させない・2026-10-16 ユーザー指示）。狭い画面では横にスクロール */ .t4-tabs { flex-wrap: nowrap; justify-content: safe center; gap: 6px; overflow-x: auto; scrollbar-width: thin; } .t4-tabs button { flex: none; gap: 5px; height: 42px; padding: 0 12px 0 6px; font-size: 13.5px; white-space: nowrap; } .t4-tabs button img { width: 26px; height: 26px; } .t4-cat__ph img { border-radius: 12px; } /* ロゴ欄は2段ぶんの高さを取っておき、カードの「施工事例」の行を横でそろえる */ .t4 .t4-cat__mk { min-height: 74px; align-content: start; } /* ===== ガスペックが選ばれる理由（2026-10-16 作り直し・同日 写真を小さく）： * 上段＝小さい写真の右に番号・見出し・要点、下段＝説明とボタンを横幅いっぱい。2列×2段・4色 ===== */ .t4 .t4-rs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; } .t4 .t4-rs__i { --ac: #32b7fc; --bg: #eaf7ff; --dk: #0b6fb8; display: grid; grid-template-columns: 144px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "ph no" "ph h" "ph k" "t t" "a a"; column-gap: 18px; margin: 0; padding: 22px 24px 22px; border: 2px solid var(--bg); border-radius: 26px; background: #fff; } .t4 .t4-rs__i:nth-child(2) { --ac: #ff7de8; --bg: #fff1fd; --dk: #c4369f; } .t4 .t4-rs__i:nth-child(3) { --ac: #f5b800; --bg: #fff8d6; --dk: #a77a00; } .t4 .t4-rs__i:nth-child(4) { --ac: #4cbf5a; --bg: #eaf8e6; --dk: #2f8f3a; } .t4-rs__b { display: contents; } .t4-rs__ph { grid-area: ph; align-self: start; display: flex; align-items: center; justify-content: center; width: 144px; height: 120px; overflow: hidden; border-radius: 16px; background: var(--bg); } .t4-rs__ph img { display: block; width: 100%; height: 100%; object-fit: cover; } .t4 .t4-rs__i:nth-child(n+3) .t4-rs__ph { padding: 8px; } .t4 .t4-rs__i:nth-child(n+3) .t4-rs__ph img { object-fit: contain; border-radius: 8px; background: #fff; } .t4 .t4-rs__no { grid-area: no; display: flex; align-items: baseline; gap: 6px; margin: 0 !important; line-height: 1; color: var(--ac); } .t4-rs__no span { font-size: 12px; font-weight: bold; letter-spacing: .14em; } .t4-rs__no b { font-size: 32px; font-weight: 900; } .t4 .t4-rs__h { grid-area: h; margin: 6px 0 0 !important; font-size: 20px; font-weight: bold; line-height: 1.35; color: #333; } .t4 .t4-rs__k { grid-area: k; justify-self: start; align-self: start; margin: 8px 0 0 !important; padding: 4px 14px; border-radius: 30px; background: var(--bg); color: var(--dk); font-size: 15px; font-weight: bold; line-height: 1.5; } .t4 .t4-rs__t { grid-area: t; margin: 14px 0 14px !important; padding-top: 14px !important; border-top: 1px dashed #dde6ee !important; font-size: 14px; line-height: 1.75; color: #555; } .t4-rs__a { grid-area: a; justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px 8px 18px; border-radius: 30px; background: var(--ac); color: #fff !important; font-size: 14px; font-weight: bold; transition: opacity .15s; } .t4-rs__a::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5l5 5-5 5' fill='none' stroke='%23333' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; } .t4-rs__a:hover { opacity: .85; } .t4 .t4-rs__i:nth-child(3) .t4-rs__a { color: #333 !important; } /* 「〜をすべて見る」ボタン：黄色の立体ボタン（.btn-c）は使わない（2026-10-16 ユーザー指示）。白地に青の枠・右に矢印の丸 */ .t4 .t4-more { text-align: center; } .t4 .t4-more a.btn100.btn-c { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; max-width: 480px; min-width: 0; margin: 0 auto; padding: 15px 22px; border: 2px solid #0065cc; border-radius: 40px; background: #fff; -webkit-box-shadow: none; box-shadow: none; color: #0065cc; font-size: 17px; letter-spacing: .04em; transform: none; } .t4 .t4-more a.btn100.btn-c::after { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #0065cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5l5 5-5 5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } .t4 .t4-more a.btn100.btn-c:hover { background: #0065cc; color: #fff; -webkit-box-shadow: none; box-shadow: none; transform: none; } .t4 .t4-more a.btn100.btn-c:hover::after { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 5l5 5-5 5' fill='none' stroke='%230065cc' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* マンション名の検索：入力欄の例は短く、補足は下に */ .t4 .t4-cd__fn { margin-top: 6px !important; font-size: 12px; color: #777; } /* マンション施工実績は「最新の施工事例」の欄の中、「施工事例をすべて見る」の下に置く（2026-10-16） */ #t4-cases .t4-cd { margin: 40px 0 0; } /* マンション施工実績：建物の写真と数字を横に並べる（2026-10-16） */ .t4-cd__m { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 12px; margin-top: 20px; } .t4-cd__ph { display: block; width: 100% !important; height: 100% !important; min-height: 180px; border-radius: 20px; object-fit: cover; object-position: 40% 30%; } .t4 .t4-cd__m .t4-cd__k { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; margin-top: 0 !important; } .t4-cd__m .t4-cd__k li { justify-content: center; padding: 12px 8px; } .t4-cd__m .t4-cd__k b { font-size: 32px; } @media screen and (max-width: 1100px) { .t4-hero__in { grid-template-columns: minmax(0, 1fr) 300px; } .t4-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } .t4-cats, .t4-cases, .t4-reason { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t4-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t4-vsum__l { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t4-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 959px) { .t4-hero__in { grid-template-columns: minmax(0, 1fr); } .t4-hero__ph { display: none; } .t4-hero__pt, .t4-hero__cta { flex-direction: column; } .t4-search { flex-wrap: wrap; } .t4-search select { width: 100%; } .t4-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } .t4-kpi ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t4-sec { padding: 46px 0; } .t4 .t4-hd__h { font-size: 26px !important; } .t4-cats, .t4-cases, .t4-reason, .t4-flow, .t4-annai { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t4-rank ol, .t4-vcards, .t4-faq { grid-template-columns: minmax(0, 1fr); } .t4-vsum { grid-template-columns: minmax(0, 1fr); } .t4-vsum__big { padding-right: 0; border-right: 0; } .t4-story__in { grid-template-columns: minmax(0, 1fr); gap: 30px; } .t4-area ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } .t4-condo { flex-direction: column; text-align: center; } .t4-flow li + li::before { content: none !important; } .t4-more .btn100 { min-width: 0; width: 100%; } } @media screen and (max-width: 767px) { .t4-hero { padding-top: 76px; } .t4 .t4-hero__h { font-size: 26px !important; } .t4-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .t4-cats, .t4-cases, .t4-reason { grid-template-columns: minmax(0, 1fr); } /* 下の案内リンクと当社のご案内の画像はスマホでも2列（2026-10-16 ユーザー指示） */ .t4 .t4-links, .t4 .t4-annai { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .t4 .t4-annai a { border-radius: 14px; } .t4 .t4-annai b { padding: 22px 10px 7px; font-size: 12.5px; } /* スマホではメイン画像より下の欄に色の丸を置かない（2026-10-16 ユーザー指示）。創業35年の青帯（.t4-story）の丸は残す */ .t4-deco::before, .t4-deco::after { content: none !important; display: none !important; } /* 「〜をすべて見る（件数）」のボタンは数字の途中で改行させない */ .t4 .t4-more .btn100 { font-size: 15px; white-space: nowrap; } /* 交換できる住宅設備：画面の横いっぱい（.t4-in の左右の余白20pxの外まで）。角を丸めず、上下の線でつなげる */ .t4 .t4-cats { gap: 0; margin: 0 -20px; } .t4 .t4-cat { border-width: 1px 0 0; border-radius: 0; } .t4 .t4-cat:last-child { border-bottom-width: 1px; } .t4 .t4-cat:hover { transform: none; } /* お知らせ：画面の横いっぱい・日付の下にタイトル（日付が横に伸びてタイトルが縦1文字ずつになっていた） */ .t4 .t4-news { display: block; width: auto; max-width: none; margin: 30px 0 0; padding: 22px 20px; border-radius: 0; } .t4 .t4-news__l { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "en all" "h all"; align-items: center; margin-bottom: 12px; } .t4 .t4-news__en { grid-area: en; } .t4 .t4-news__h { grid-area: h; font-size: 22px; } .t4 .t4-news__all { grid-area: all; margin-top: 0; } .t4 .t4-news #news_wrap { padding: 0 !important; border-radius: 14px; overflow: hidden; } .t4 .t4-news #news_list li { display: block !important; padding: 12px 14px !important; } .t4 .t4-news #news_list li .news_List_Ymd { display: inline-block !important; float: none !important; width: auto !important; margin: 0 !important; font-size: 12px; } .t4 .t4-news #news_list li .news_List_Title { display: block !important; width: auto !important; margin: 6px 0 0 !important; padding: 0 !important; writing-mode: horizontal-tb; } .t4 .t4-news #news_list li .news_List_Title a { font-size: 14.5px; line-height: 1.6; } /* ご依頼の流れ：1段ずつ横いっぱい・隙間なしでつなげる（2026-10-16 ユーザー指示） */ .t4 .t4-flow { grid-template-columns: minmax(0, 1fr); gap: 0; } .t4 .t4-flow li { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "n b" "n s"; column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: 0; text-align: left; } .t4 .t4-flow li + li { border-top: 0; } .t4 .t4-flow li:first-child { border-radius: 18px 18px 0 0; } .t4 .t4-flow li:last-child { border-radius: 0 0 18px 18px; } .t4 .t4-flow li span { grid-area: n; width: 44px; height: 44px; font-size: 20px; } .t4 .t4-flow li b { grid-area: b; margin-top: 0; font-size: 16px; } .t4 .t4-flow li small { grid-area: s; margin-top: 2px; font-size: 13px; line-height: 1.6; } } /* ---------- メイン画像の中の「型番検索＋実績」（元の商材タイルと同じ位置・大きさ 730×282）2026-10-16 作り直し ---------- */ #main_menu2.t4-mv { position: relative; top: 330px; left: 16%; z-index: 10; display: flex; flex-direction: column; width: 730px; height: auto; margin: 0 auto; padding: 0; border-radius: 22px; background: #fff; overflow: hidden; box-sizing: border-box; font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; font-size: 14px; line-height: 1.5; } .t4-mv *, .t4-mv *::before, .t4-mv *::after { box-sizing: border-box; } .t4-mv .spn-i { width: 20px; height: 20px; flex: none; } .t4-mv__s { margin: 0; padding: 16px 22px 18px; background: linear-gradient(120deg, #0b5cad 0%, #1a86de 100%); } .t4-mv__l { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 0; font-size: 16px; font-weight: bold; color: #fff; letter-spacing: .03em; } .t4-mv__r { display: flex; gap: 8px; } .t4-mv__r select { flex: none; width: 150px; height: 46px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; background: #fff; font-size: 14px; font-weight: bold; color: #333; } .t4-mv__r input { flex: 1; min-width: 0; height: 46px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; background: #fff; font-size: 15px; color: #333; } .t4-mv__r button { flex: none; height: 46px; padding: 0 26px; border: 0; border-radius: 10px; background: #ffd400; color: #333; font: inherit; font-size: 16px; font-weight: bold; cursor: pointer; transition: background .15s; } .t4-mv__r button:hover { background: #ffe14d; } .t4-mv__k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; margin: 0; padding: 14px 10px 0; list-style: none; } .t4-mv__k li { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 0 6px; list-style: none; text-align: center; } .t4-mv__k li::before { content: none; } .t4-mv__k li + li { border-left: 1px solid #e3ebf2; } .t4-mv__i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #e8f4fd; color: #0b5cad; } .t4-mv__i .spn-i { width: 18px; height: 18px; } .t4-mv__k li:nth-child(even) .t4-mv__i { background: #fdeefb; color: #d63bb5; } .t4-mv__k p { margin: 4px 0 0; padding: 0; line-height: 1.1; } .t4-mv__k b { font-size: 26px; font-weight: 900; letter-spacing: .01em; color: #0b2d4f; } .t4-mv__k small { margin-left: 2px; font-size: 12px; font-weight: bold; color: #0b2d4f; } .t4-mv__k li > span:last-child { margin-top: 3px; font-size: 12px; color: #6a7884; } .t4-mv__n { margin: 0; padding: 4px 16px 10px; font-size: 10.5px; color: #9aa6b1; text-align: right; } /* ---------- H1（何のサイトかが分かる文）とキャッチ（見た目は元の h1 と同じ）2026-10-16 ---------- */ .t4-h1 { display: block; width: fit-content !important; max-width: 92%; margin: 0 auto 10px !important; padding: 4px 18px !important; border-radius: 30px; background: rgba(255, 255, 255, .88) !important; font-size: 17px !important; font-weight: bold; color: #333 !important; line-height: 1.5; text-align: center; } .t4-h1::before, .t4-h1::after { content: none !important; } .topmain_text3 { top: 10% !important; } /* PC：キャッチの後ろに薄い白の背景を敷いて読みやすく（2026-10-16 ユーザー指示） */ @media screen and (min-width: 960px) { #mainImg .topmain_text3 { width: max-content !important; max-width: calc(100% - 40px); padding: 14px 44px 18px; background: rgba(255, 255, 255, .5); } } .topmain_text3 .t4-catch { position: relative; margin: 0 auto; font-size: 54px; font-weight: bold; line-height: 1.3; color: #0065cc; text-align: center; } .topmain_text3 .t4-catch::after { content: ""; position: relative; bottom: 10px; left: 8px; display: inline-block; width: 90px; height: 90px; vertical-align: middle; background: url("/images/character/gencyokun.webp") center / contain no-repeat; } @media only screen and (max-width: 480px) { .topmain_text3 .t4-catch { font-size: 28px; } .topmain_text3 .t4-catch::after { display: none; } .t4-h1 { font-size: 13px !important; } } /* ---------- 商材ブロックの説明文 ---------- */ .t4 .t4-cat__n { margin-top: 12px !important; padding: 0 10px; font-size: 16px; font-weight: bold; line-height: 1.35; color: #333; } .t4-cat__d { margin-top: 4px; padding: 0 14px; font-size: 12px; line-height: 1.5; color: #666; min-height: 3em; } /* ---------- マンション施工実績 ---------- */ .t4-cd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: stretch; margin: 0 0 60px; padding: 36px 40px; border-radius: 28px; background: linear-gradient(135deg, #e6f6ff 0%, #fff0fe 100%); } .t4-cd__en { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: bold; letter-spacing: .25em; color: #32b7fc; } .t4-cd__en img { width: 44px; height: 44px; } .t4 .t4-cd__h { margin-top: 4px !important; font-size: 30px !important; font-weight: 900; color: #0065cc !important; } .t4 .t4-cd__d { margin-top: 10px !important; font-size: 15px; line-height: 1.8; color: #444; } .t4-cd__k { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px !important; } .t4-cd__k li { display: flex; flex-direction: column; align-items: center; padding: 16px 8px; border-radius: 20px; background: #fff; } .t4-cd__k b { font-size: 36px; font-weight: 900; line-height: 1.1; color: #e00; } .t4-cd__k span { margin-top: 4px; font-size: 13px; font-weight: bold; color: #555; } .t4-cd__r { display: flex; flex-direction: column; padding: 22px 24px; border-radius: 22px; background: #fff; } .t4-cd__f label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: bold; color: #0065cc; } .t4-cd__f div { display: flex; gap: 8px; } .t4-cd__f input { flex: 1; min-width: 0; height: 48px; margin: 0; padding: 0 14px; border: 2px solid #32b7fc; border-radius: 12px; font-size: 16px; } .t4-cd__f button { flex: none; height: 48px; padding: 0 26px; border: 0; border-radius: 12px; background: #0065cc; color: #fff; font: inherit; font-size: 16px; font-weight: bold; cursor: pointer; } .t4-cd__f button:hover { background: #004f9f; } .t4 .t4-cd__nh { margin-top: 18px !important; font-size: 13px; font-weight: bold; color: #888; } .t4-cd__nl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px !important; } .t4-cd__nl a { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: #f3fbff; color: #333; line-height: 1.4; } .t4-cd__nl a:hover { background: #e2f3ff; color: #0065cc; } .t4-cd__nl b { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .t4-cd__nl small { font-size: 11.5px; color: #888; } .t4-cd__all { align-self: flex-end; margin-top: auto; padding-top: 12px; font-size: 13.5px; font-weight: bold; color: #0065cc !important; text-decoration: underline !important; } /* ---------- お知らせ ---------- */ .t4-news { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 30px; align-items: center; width: calc(100% - 40px); max-width: 1100px; margin: 50px auto 0; padding: 26px 32px; border-radius: 24px; background: #f6f9fb; } .t4-news__l { display: flex; flex-direction: column; align-items: flex-start; } .t4 .t4-news__en { font-size: 14px; font-weight: bold; letter-spacing: .25em; color: #32b7fc; } .t4 .t4-news__h { margin: 0 !important; padding: 0 !important; background: none !important; font-size: 26px; font-weight: 900; color: #0065cc; } .t4-news__all { margin-top: 14px; padding: 6px 20px; border-radius: 30px; background: #313131; color: #fff !important; font-size: 13px; font-weight: bold; } .t4-news__all:hover { background: #0065cc; } .t4-news #news_list { margin: 0 !important; padding: 0 !important; border: 0 !important; } .t4-news #news_list li { display: flex !important; align-items: center; gap: 18px; margin: 0 !important; padding: 14px 6px !important; border: 0 !important; border-bottom: 1px solid #e3eaf0 !important; background: none !important; list-style: none; } .t4-news #news_list li:last-child { border-bottom: 0 !important; } .t4-news .news_List_Ymd { flex: none; padding: 2px 12px; border-radius: 14px; background: #e6f6ff; color: #0065cc; font-size: 13px; font-weight: bold; } .t4-news .news_List_Title a { color: #333 !important; font-size: 15px; } .t4-news .news_List_Title a:hover { color: #0065cc !important; text-decoration: underline; } .t4-news .news_01 a[href*="news_list"], .t4-news .news_01 .btn, .t4-news .news_ichiran, .t4-news p.right { display: none !important; } @media screen and (max-width: 959px) { .t4-cd, .t4-news { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; gap: 18px; } .t4-cd__nl { grid-template-columns: minmax(0, 1fr); } } /* メイン画像の女性：確認版だけ新しい写真に差し替え（本番 index.html は元の character01.webp のまま）2026-10-16 */ @media screen and (min-width: 960px) { #mainImg .character01 { background-image: url("/images/character/top2_woman.webp") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center bottom !important; width: 440px !important; height: 420px !important; top: 310px !important; } } /* 見積り・フリーダイヤルを枠の中へ（2026-10-16）。枠は高さを中身に合わせる */ #main_menu2.t4-mv { height: auto !important; } .t4-mv__k { flex: none; padding-top: 16px; } .t4-mv__n { padding-bottom: 8px; } .t4-mv__c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 4px 16px 16px; background: #fff; } .t4-mv__c a { position: relative; display: flex; align-items: center; gap: 12px; height: 66px; padding: 0 16px; border-radius: 14px; text-decoration: none; transition: filter .15s; } .t4-mv__ci { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; } .t4-mv__c .spn-i { width: 21px; height: 21px; } .t4-mv__ct { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.2; text-align: left; } .t4-mv__ct small { font-size: 11.5px; font-weight: bold; letter-spacing: .03em; } .t4-mv__ct b { margin-top: 3px; font-weight: 900; white-space: nowrap; } .t4-mv__m { background: #ff6a00; color: #fff !important; } .t4-mv__m .t4-mv__ci { background: #fff; color: #ff6a00; } .t4-mv__m small { display: inline-block; padding: 1px 8px; border-radius: 10px; background: rgba(255, 255, 255, .25); } .t4-mv__m b { font-size: 18px; } .t4-mv__ar { position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg); } .t4-mv__t { background: #eef6fd; color: #0b2d4f !important; } .t4-mv__t .t4-mv__ci { background: #0b5cad; color: #fff; } .t4-mv__t small { color: #0b5cad; } .t4-mv__t b { font-size: 25px; letter-spacing: .03em; color: #0b2d4f; } /* 共通の base.css にある「.top_mainbg p:hover / a:hover で背景を白・文字を紺にする」指定を、このメイン画像では打ち消す（2026-10-16） */ #mainImg.top_mainbg p:hover { background: transparent; } #mainImg.top_mainbg .t4-catch:hover { color: #0065cc; } #mainImg.top_mainbg .t4-mv__l:hover { color: #fff; } #mainImg.top_mainbg .t4-mv__n:hover { color: #9aa6b1; } #mainImg.top_mainbg .t4-mv__k p:hover { color: inherit; } #mainImg.top_mainbg .t4-mv__m:hover { background: #f25f00; color: #fff; } #mainImg.top_mainbg .t4-mv__t:hover { background: #e2effb; color: #0b2d4f; } /* タブレット・スマホ：元の商材タイルと同じく画面幅に合わせる（スマホ版の本格的なデザインは次の段階） */ @media screen and (max-width: 959px) { #main_menu2.t4-mv { left: 0 !important; width: auto !important; max-width: 730px; margin: 0 12px !important; } .t4-mv__r { flex-wrap: wrap; } .t4-mv__r select { width: 100%; } .t4-mv__k { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; } .t4-mv__k li:nth-child(3) { border-left: 0; } .t4-mv__c { grid-template-columns: minmax(0, 1fr); } } /* ===== 色の配分（2026-10-16 ユーザー指示：丸はピンクと青だけでなく黄色と緑も・薄くしない・全体でピンクと青に偏らない） ===== * はっきりした色：青 #32b7fc／ピンク #ff7de8／黄 #ffd400／緑 #4cbf5a * 淡い地の色　　：青 #eaf7ff／ピンク #fff1fd／黄 #fff8d6／緑 #eaf8e6 */ /* メイン画像の丸（確認版だけ） */ #mainImg .decoration01 { background-color: #8fd8ff; } #mainImg .decoration05 { background-color: #4cbf5a; } #mainImg .decoration05::before { background-color: #7dd36b; } /* 二重の丸は外と中を同じ色の濃淡にする（青の中に黄色などを入れない） */ #mainImg .decoration04 { background-color: #ffd400; } #mainImg .decoration04::before { background-color: #ffe566; } /* 各欄の丸は薄くしない */ .t4-deco::before, .t4-deco::after { opacity: 1 !important; } #t4-rank::before { background: #ff7de8; } #t4-rank::after { background: #4cbf5a; } #t4-cases::before { background: #4cbf5a; } #t4-cases::after { background: #ffd400; } #t4-voice::before { background: #4cbf5a; } #t4-voice::after { background: #ffd400; } /* 各欄の地の色を4色で回す */ #t4-rank.t4-sec { background: #eaf7ff; } #t4-cases.t4-sec { background: #eaf7ff; } #t4-voice.t4-sec { background: #fff1fd; } #t4-faq.t4-sec { background: #eaf7ff; } #t4-reason.t4-sec { background: #fff1fd; } /* 商材ブロックの写真の地を4色で回す */ /* 商材ブロックは写真の枠だけでなくブロック全体を4色の淡色で塗る（2026-10-16 ユーザー指示） */ .t4-cats > .t4-cat:nth-child(4n+1) { background: #eaf7ff; border-color: #d3ebfb; } .t4-cats > .t4-cat:nth-child(4n+2) { background: #fff1fd; border-color: #f6dcf2; } .t4-cats > .t4-cat:nth-child(4n+3) { background: #fff8d6; border-color: #f3e7b0; } .t4-cats > .t4-cat:nth-child(4n+4) { background: #eaf8e6; border-color: #d2ecca; } .t4-cats > .t4-cat .t4-cat__ph { background: transparent !important; } .t4 .t4-cats > .t4-cat .t4-cat__f { border-top-color: rgba(0, 0, 0, .06); } /* メイン画像の実績の丸いアイコン */ .t4-mv__k li:nth-child(1) .t4-mv__i { background: #e3f4fd; color: #0b5cad; } .t4-mv__k li:nth-child(2) .t4-mv__i { background: #fde9fb; color: #d63bb5; } .t4-mv__k li:nth-child(3) .t4-mv__i { background: #fff3c2; color: #b88a00; } .t4-mv__k li:nth-child(4) .t4-mv__i { background: #e2f5dd; color: #2f8f3a; } /* ご依頼の流れの番号 */ .t4-flow li:nth-child(1) span { background: #32b7fc; } .t4-flow li:nth-child(2) span { background: #ff7de8; } .t4-flow li:nth-child(3) span { background: #f5b800; } .t4-flow li:nth-child(4) span { background: #4cbf5a; } .t4-flow li + li::before { border-left-color: #c9d3dc !important; } /* マンション施工実績・お客様の声のまとめ */ /* マンション施工実績：背景はグラデーションをやめて落ち着いた1色（2026-10-16 ユーザー指示） */ .t4-cd { background: #fff; } .t4-vsum__l li:nth-child(4n+1) { background: #eaf7ff; } .t4-vsum__l li:nth-child(4n+2) { background: #fff1fd; } .t4-vsum__l li:nth-child(4n+3) { background: #fff8d6; } .t4-vsum__l li:nth-child(4n+4) { background: #eaf8e6; } @media screen and (max-width: 959px) { .t4 .t4-rs { grid-template-columns: minmax(0, 1fr); } } @media screen and (max-width: 600px) { .t4 .t4-rs__i { grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; padding: 18px; } .t4-rs__ph { width: 104px; height: 88px; } .t4 .t4-rs__h { font-size: 17px; } .t4 .t4-rs__k { font-size: 13px; padding: 3px 10px; } } @media screen and (max-width: 600px) { .t4-cd__m { grid-template-columns: minmax(0, 1fr); } .t4-cd__ph { min-height: 0; aspect-ratio: 460 / 238; } .t4 .t4-cd__m .t4-cd__k { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===== スマホのメイン画像（確認版 2026-10-16 作り直し）===== * 旧スマホ画像 main_top01_sp4.webp（文字と女性が焼き込み）をやめ、文字はHTML・写真と絵は背景・丸はCSSで組む。 * 959px以下（スマホ・タブレット）。 * 上：キャッチ（中央） * 中：女性（左）＋げんちょくんが給湯器をバンに積む絵（右・/images/character/top2_van.webp ＝ PSD「6 (2).psd」から書き出し） * 下：型番検索と実績（画面の横いっぱい）。見積り・電話は画面下の帯にあるので枠の中では出さない */ @media screen and (max-width: 959px) { #mainImg.top_mainbg { position: relative; display: flex; flex-direction: column; height: auto !important; margin-top: 62px; padding: 0 14px 0 !important; background: #eef7fd url("/images/character/top_mainbg_pc.webp") 6% 0 / auto 330px no-repeat !important; text-align: center; overflow: hidden; } #mainImg .decoration01, #mainImg .decoration03, #mainImg .decoration05 { display: none !important; } #mainImg .decoration02, #mainImg .decoration04, #mainImg .decoration06 { display: block !important; position: absolute; z-index: 0; border-radius: 50%; transform: none; } #mainImg .decoration02::before, #mainImg .decoration04::before, #mainImg .decoration06::before { display: none !important; } /* 女性の後ろの青い丸・左上のピンク・バンの上の黄色 */ #mainImg .decoration02 { top: 128px; left: -22px; right: auto; bottom: auto; width: 180px; height: 180px; background-color: #32b7fc; } #mainImg .decoration06 { top: -34px; left: -10px; right: auto; bottom: auto; width: 84px; height: 84px; background-color: #ffc3fc; } #mainImg .decoration04 { top: 120px; right: 16px; left: auto; bottom: auto; width: 44px; height: 44px; background-color: #ffd400; } /* キャッチ（中央の上） */ #mainImg .topmain_text3 { order: 1; position: relative !important; z-index: 3; top: auto !important; left: auto !important; width: auto; min-height: 0; margin: 0; padding: 30px 0 25px; transform: none; text-align: center; } #mainImg .topmain_text3 .t4-catch { display: inline-block; margin: 0; padding: 3px 12px; border-radius: 30px; background: #2bbf06; color: #fff; font-size: 18px; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; } #mainImg.top_mainbg .topmain_text3 .t4-catch:hover { color: #fff; background: #0065cc; } #mainImg .topmain_text3 .t4-catch::after { display: none; } /* キャッチの後ろに薄い白の背景（PCと同じ・2026-10-16 ユーザー指示）。画面の横いっぱいの帯 */ #mainImg .topmain_text3 { margin: 20px -14px 10px !important; padding: 14px 10px 16px !important; background: rgba(255, 255, 255, .5); } #mainImg .topmain_text3 span { display: block; margin-top: 8px; text-align: center !important; word-break: keep-all; overflow-wrap: normal; font-size: 22px; font-weight: 900; line-height: 1.4; color: #0b5cad; letter-spacing: .02em; } #mainImg .topmain_text3 span::after { content: none; } /* 女性（左）とバンの絵（右）。1つの箱に背景2枚で置き、下端を検索の枠に合わせる */ #mainImg .character01 { order: 2; display: block !important; position: relative !important; z-index: 2; top: auto !important; left: auto !important; right: auto; bottom: auto; width: auto !important; height: 196px !important; margin: 0 -14px; transform: none !important; float: none; background: url("/images/character/top2_van.webp") right 17px bottom -3px / 40% auto no-repeat, url("/images/character/top2_woman.webp") left -6px bottom / auto 100% no-repeat !important; } /* 型番検索と実績：画面の横いっぱい（女性の写真の下端が見えないように）。角は丸めない */ #mainImg #main_menu2.t4-mv { order: 3; position: relative !important; z-index: 4; top: auto !important; left: auto !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 -14px !important; border-radius: 0; text-align: left; } #mainImg .t4-mv__s { padding: 14px 14px 14px; } #mainImg .t4-mv__l { margin-bottom: 8px; font-size: 15px; } #mainImg .t4-mv__r { flex-wrap: wrap; gap: 8px; } #mainImg .t4-mv__r select { width: 100%; height: 44px; } #mainImg .t4-mv__r input { flex: 1 1 0; height: 44px; font-size: 16px; } #mainImg .t4-mv__r button { height: 44px; padding: 0 20px; } #mainImg .t4-mv__k { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; padding: 16px 8px 4px; } #mainImg .t4-mv__k li:nth-child(3) { border-left: 0; } #mainImg .t4-mv__k b { font-size: 24px; } /* 「◯年◯月◯日時点の公開データ」は実績の数字の上に出す（2026-10-16 ユーザー指示） */ #mainImg .t4-mv__s { order: 1; } #mainImg .t4-mv__n { order: 2; padding: 16px 14px 0; text-align: center; } #mainImg .t4-mv__k { order: 3; padding-bottom: 16px !important; } #mainImg .t4-mv__c { display: none !important; } } @media screen and (max-width: 360px) { #mainImg .topmain_text3 span { font-size: 20px; } #mainImg .character01 { height: 176px !important; background-size: 50% auto, auto 100% !important; } } /* タブレット（600〜959px）は大きく */ @media screen and (min-width: 600px) and (max-width: 959px) { #mainImg.top_mainbg { margin-top: 0; padding: 0 28px 0 !important; background-size: auto 470px !important; } #mainImg .topmain_text3 { margin: 14px -28px 0 !important; padding: 20px 10px 22px !important; } #mainImg .topmain_text3 .t4-catch { padding: 5px 18px; font-size: 18px; } #mainImg .topmain_text3 span { margin-top: 10px; font-size: 36px; } #mainImg .character01 { height: 330px !important; margin: 0 -28px; background-size: 50% auto, auto 100% !important; background-position: right 24px bottom 14px, left 10px bottom !important; } #mainImg .decoration02 { top: 150px; left: -40px; width: 360px; height: 360px; } #mainImg .decoration06 { width: 150px; height: 150px; top: -60px; left: -60px; } #mainImg .decoration04 { top: 170px; right: 60px; width: 54px; height: 54px; } #mainImg #main_menu2.t4-mv { margin: 0 -28px !important; } #mainImg .t4-mv__s, #mainImg .t4-mv__k, #mainImg .t4-mv__n { padding-left: 28px; padding-right: 28px; } #mainImg .t4-mv__r select { width: 180px; } #mainImg .t4-mv__r { flex-wrap: nowrap; } #mainImg .t4-mv__k { grid-template-columns: repeat(4, minmax(0, 1fr)); } #mainImg .t4-mv__k li:nth-child(3) { border-left: 1px solid #e3ebf2; } } /* ===== 新しいフッター（確認版だけ・/include/top2/footer2.php）2026-10-16 ===== * 本番の footer.php は読み込むが、その