@charset "UTF-8"; /* * LP 共通ベース CSS。全 LP が宣言まで同一で持っているルールだけを集めたもの。 * ブレークポイント（@media）は lp-base-responsive.css に切り出してあり、 * theme.css の後ろで読む（順序の理由は docs/lp-operations.md「読み込み順」）。 * * lp-base.css → form-patch.css → theme.css → lp-base-responsive.css * * scripts/lp/rebuild-lp-base.mjs が origin/develop の各 LP の style.css から生成し、 * scripts/lp/split-lp-base-responsive.mjs が @media を切り出す。 * 並び順は construction のドキュメント順。 * * 編集ルール: * - ここに「1 つの LP にしか要らないスタイル」を足さない。積集合が壊れ、 * 他の LP に意図しないスタイルが効く（例: FAQ アイコンを特定 LP の色に * 染める filter がここにあると、全 LP のアイコンがその色になる） * - 色は各 LP の theme.css が持つ。ベースは色に依存しない構造だけを持つ */ /* Noto Sans JP は Google Fonts Early Access (fonts.gstatic.com/ea/...) が廃止 済みで 404 + CORS エラーになるため、style.css 内の @font-face 直リンクは撤去。 代わりに index.html / thanks.html の で https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap を 経由で読み込む。 */ /*============================================================ common ==============================================================*/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 62.5%; } body { font-family: "ryo-gothic-plusn", "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; font-size: 1.6rem; line-height: 1.7; } img { display: block; width: auto; height: auto; max-width: 100%; margin: auto; } input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; } ul { list-style: none; } .cf:after { content: ""; display: block; clear: both; } .center { text-align: center; } .pc { display: inherit; } .notepc { display: none; } .sp { display: none; } .inner { max-width: 1000px; margin: auto; padding: 0 20px; } header { position: fixed; top: 0; width: 100%; -webkit-transition: .6s ease-in-out all; transition: .6s ease-in-out all; background: #fff; z-index: 100; } header ul li{ margin: 0; } a:visited { text-decoration: none; } a { color: #fff; text-decoration: none; } /* スクロール出現演出。要素は常に opacity:1（消えない）にして、下からの スライドイン(translateY)だけで演出する。理由: 初期 opacity:0 だと Microsoft Clarity のヒートマップ/再生（記録時 DOM を JS 非実行で再構築）で inview が発火せず opacity:0 のまま残り、要素が非表示に見えてしまうため。 */ .scrollin_main{ opacity: 1; -webkit-transition: .8s ease-out all; transition: .8s ease-out all } .scrollin { opacity: 1; transform: translateY(80px); -webkit-transition: 1s cubic-bezier(0, 0, 0.38, 1.1) all; transition: 1s cubic-bezier(0, 0, 0.38, 1.1) all } .fadeIn { opacity: 1; transform: translateY(0); } /* ファーストビュー（#main 内の .mv_hero_img）は従来どおりフェードイン演出を維持する。 Clarity でも記録時に必ず表示される領域なので opacity:0 のフェードのままでよい。 下部セクションの .scrollin は Clarity 対策で opacity:1 のまま据え置く。 */ .nav_flex { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 0; } header nav { display: flex; justify-content: space-between; align-items: center; } .header-logo { margin-left: 80px; } .nav_flex{ height: 80px; box-shadow: 0 0 5px rgba(0,0,0,0.05); } .flex{ display: flex; flex-wrap:wrap; } .logo_flex { display: flex; justify-content: flex-start; align-items: center; } .header-address{ font-size: 12px; color: #333; margin: 10px 0 0 10px; } /*============================================================ body ==============================================================*/ .main_over{ position: relative; overflow: hidden; } .main_cta{ max-width: 411px; margin-left: 0; padding: 15px 75px; font-size: 2.4rem; font-weight: bold; border-radius: 45px; text-align: center; line-height: 1; letter-spacing: 2px; } #achievement .h2_text{ position: relative; } .h2_ttl{ margin-bottom: 60px; font-size: 3.2rem; text-align: center; line-height: 1.7; letter-spacing: 1px; } .achievement_txt{ margin-bottom: 87px; text-align: center; } .client_text{ font-size: 14px; margin: 40px 0px 40px 40px; } .client_text li{ text-align: center; } .industry_list{ margin: 0px 40px; text-align: center; } /* #case-studies: 事例カード（リンクなし表示のみ） */ /* スワイプ可能を示すヒント */ .case-hint__icon{ font-size: 1.8rem; letter-spacing: -2px; animation: caseHintPulse 1.6s ease-in-out infinite; } @keyframes caseHintPulse{ 0%, 100%{ transform: translateX(0); opacity: .6; } 50%{ transform: translateX(4px); opacity: 1; } } /* キャリッジ + ナビボタン用ラッパ */ .case-carousel{ position: relative; } /* 端のフェード（次/前にコンテンツがあることを示唆） */ .case-carousel::before, .case-carousel::after{ content: ""; position: absolute; top: 10px; bottom: 30px; width: 40px; pointer-events: none; z-index: 2; } .case-nav:active{ transform: translateY(-50%) scale(0.95); } .case-nav--prev{ left: -8px; } .case-nav--next{ right: -8px; } /* 横スクロールカルーセル: 1カードずつ snap で見せる単列レイアウト */ .case-grid::-webkit-scrollbar{ height: 8px; } .case-grid::-webkit-scrollbar-track{ background: rgba(0,0,0,0.05); border-radius: 4px; } .case-card__cover{ position: relative; width: 100%; aspect-ratio: 488 / 717; background: #f4f6fc; overflow: hidden; } .case-card__cover img{ width: 100%; height: 100%; object-fit: contain; display: block; } .case-card__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } /* #strength: ONLY ONE + about 統合セクション */ .strength_lead{ text-align: center; margin: 0 auto 60px; max-width: 880px; line-height: 1.9; } .strength_lead .accent-mark{ font-weight: bold; } .strength_grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .strength_box{ background: #fff; padding: 0 0 28px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); text-align: center; display: flex; flex-direction: column; align-items: stretch; gap: 16px; overflow: hidden; } .strength_box__cover img{ width: 100%; height: 100%; object-fit: cover; display: block; } .strength_box__title{ font-size: 1.7rem; font-weight: bold; color: #222; line-height: 1.4; padding: 0 16px; margin-top: 8px; } .strength_box__text{ font-size: 1.4rem; line-height: 1.7; color: #333; text-align: left; padding: 0 20px; } /* ========================================= #dev-process (Quality Assurance) 再設計 ========================================= */ /* お悩みアイコンカード */ /* Before / After 比較 */ /* 3つのポイント: 横並びタイムライン */ /* 詳細アコーディオン */ .link_icon{ display: inline-block; margin-left: 5px; } .legacy-issues{ margin: 50px auto 40px; padding: 30px 28px; background: #f6f6f6; box-shadow: 0px 0px 18px rgba(0,0,0,0.06); } .legacy-issues h3{ font-size: 2rem; margin-bottom: 14px; color: #333; } .legacy-issues ul{ padding-left: 18px; margin: 0; } .legacy-issues li{ margin-bottom: 10px; line-height: 1.6; } .legacy-issues li:last-child{ margin-bottom: 0; } .service-scheme{ margin-top: 30px; display: flex; flex-wrap: wrap; gap: 18px; } .scheme-node:last-child::after{ display: none; } .scheme-node:last-child::before{ display: none; } .scheme-text{ margin: 0; color: #333; line-height: 1.5; } #faq { padding: 72px 0 5px; background:rgba(242,242,242); } .qa { width: 80%; margin: 0 auto 40px auto; max-width: 100%; } .question { display: flex; align-items: center; margin-bottom: 0; cursor: pointer; position: relative; padding-right: 40px; } .question::after { content: "+"; position: absolute; right: 0; font-size: 24px; font-weight: bold; color: #333; transition: transform 0.3s; } .question.accordion_open::after { content: "−"; } .question.accordion_open { margin-bottom: 14px; } .qa p { padding-left: 30px; } .qa_table { margin-left: 30px; width: 100%; border-color: lightgray; } .qa_table td{ padding-left: 3px; } #contact { margin: 100px auto 60px; } .contact_box { margin-bottom: 60px; } .contact_tbl tr{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding-bottom: 40px; } .contact_tbl tr:last-child{ padding-bottom: 0; } .contact_tbl .radiobtn{ justify-content: flex-start; } .contact_tbl .align{ align-items: flex-start; } .radio_wrap{ margin-left: 30px; } .radio-input{ display: none; } .radio-input + label{ padding-left: 20px; position:relative; margin-right: 20px; } .radio-input + label::before{ content: ""; display: block; position: absolute; top: 5px; left: 0; width: 15px; height: 15px; border: 1px solid #999; border-radius: 50%; } label.radio_text:nth-of-type(2){ margin-left: -30px; } .contact_tbl { width: 100%; margin-bottom: 10px; border-collapse: collapse; } .contact_tbl th { position: relative; margin-left: 70px; text-align: left; vertical-align: middle; } .checkbox_wrap{ width: 654px; display: flex; justify-content:flex-start; flex-wrap: wrap; } .checkbox { display: none; } .checkbox + .checkbox-icon { position: relative; vertical-align: middle; } .contact_req .select{ } .contact_any { background: #7D7D7D; } .contact_tbl .small { display: inline-block; margin-left: 5px; font-size: 1.2rem; font-weight: normal; } .contact_input { width: 683px; padding: 16px 17px; font-size: 1.4rem; border: 1px solid #707070; border-radius: 5px; font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; line-height: 1.5; } textarea.contact_input { width: 683px !important; height: 123px !important; } select.contact_input { cursor: pointer; } .contact_input::placeholder { font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; font-size: 1.6rem; color: #333333; opacity: 0.5; } .checkbox_input { display: none; } .privacy_wrap{ margin: 70px auto 0; text-align: center; } .privacy_txt { text-align: center; display: inline-block; padding-left: 20px; position:relative; cursor: pointer; line-height: 1; color: #333333; } label.radio, label.radio_text{ position : relative; cursor : pointer; display : inline-block; overflow : hidden; box-sizing : border-box; } .error { display: inline-block; text-align: center; } .privacy{ overflow-x: scroll; height: 300px; margin: 0 auto 20px; padding: 20px; border: 1px solid #ccc; border-radius: 10px; } .pulldown{ position: relative; display: block; } .pulldown::before{ content: ""; position: absolute; top: 50%; right: 10px; display: block; width: 0; height: 0; margin: -2px 0 0 0; border: 5px solid transparent; border-top: 7px solid #333; } select { cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; display: block; width: 200px; padding: 0.5em 1em; color: #333; border: none; border-radius: 5px; background: transparent; } ::-webkit-{ display: none; } ::-ms-expand { display: none; } #info .inner{ width: 433px; text-align: center; } #info .inner p:first-child{ margin: 40px auto 0; } .info_tel{ position: relative; display: block; margin:5px auto; font-size: 49px; line-height: 1; font-weight: bold; line-height: 1; color: #333; } .info_tel img{ display: inline-block; margin-right: 8px; } #info .flex{ justify-content: space-between; } .corporate_link { margin-top: 20px; } .corporate_link a{ color: blue; } .link_icon{ display: inline-block; margin-left: 5px; } .link{ color: #333; text-decoration: underline; margin-bottom: 5px; transition: 0.3s ease all; } .link:hover{ opacity: 0.7; } .page_txt{ text-align: center; } .pagetop { position: fixed; bottom: 100px; right: 260px; z-index: 1000; transition: .3s ease all; } .pagetop.hide{ opacity: 0; } .pagetop_txt01{ font-size: 1.6rem; } .pagetop_txt02{ font-size: 2.4rem; line-height: 1; } /*============================================================ breakpoint 1700px ==============================================================*/ /*============================================================ breakpoint 1500px ==============================================================*/ /*============================================================ AI Prototype / Dev Process Section ==============================================================*/ /* 図解表示エリア */ /* 詳細カードグリッド */ /* レスポンシブ調整 (既存の1000px, 768pxブレイクポイントに準拠) */ /*============================================================ Service List (15 Items / Image Style) ==============================================================*/ .service-item-new:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(3, 80, 156, 0.1); border-color: #A5C8ED; } /*============================================================ Quality Assurance Section - 追加CSS ※ #renewal-service と同じスタイルを適用 ※ style.css の末尾に追記してください ==============================================================*/ /* 比較図（SVG画像）のコンテナ */ /* サービスカード */ /* カードサマリー（強調テキスト） */ /* 例ボックス */ /* 課題セクション（legacy-issuesを流用） */ /* 進め方（service_stepsを流用） */ /* フロー図（service-schemeを流用） */ /* レスポンシブ */ /*============================================================ example-box スタイル ※ #renewal-service と #dev-process 共通で使用 ※ style.css の末尾に追記してください ==============================================================*/ /* カードサマリー（強調テキスト） */ /* サブタイトル */ /* 例ボックス */ .example-box ul { margin: 0; padding-left: 0; list-style: none; } .example-box li { margin-bottom: 10px; line-height: 1.7; font-size: 1.4rem; } .example-box li:last-child { margin-bottom: 0; } .example-box li strong { color: #333; } /* 課題セクションの補足テキスト */ /*============================================================ MV Hero Image ==============================================================*/ /*============================================================ STRENGTH カード: SP は 1 列・画像左 + テキスト右（縦長解消） 既存の repeat(2,1fr) 指定が効いていないため #strength 詳細度で上書き ==============================================================*/ /* ===== Header Nav (added from lp-app-01) ===== */ /* header 内 a の既定色（#fff）を上書き。白背景ヘッダー上で読めるように */ /* hover で下線（CTA は除外） */ /* CTA ボタン（.cta のグラデ背景を流用） */ /* SP ハンバーガー / メニューは PC では非表示 */ /* タブレット幅以下では横並びナビをハンバーガー + スライドメニューに切替 （横並びナビはロゴと干渉するため余裕のある広いデスクトップ専用にする） */ /* 中〜狭デスクトップではロゴ右の住所がナビ/ハンバーガーを圧迫して折り返すため隠す （≤1024px・SP でも非表示。広い画面でのみ住所を表示する） */ /* SP: ロゴ・CTA アイコンが出る幅。ヘッダー高 60px に合わせてメニュー位置を調整し、 お問い合わせアイコン + ハンバーガーを右側にまとめる */ /*============================================================ ISSUES（#pain）: メインビジュアル直下の課題提起セクション 実績(#achievement)より前に「読み手自身の課題」を置き、第2スクリーンでの 離脱を防いで自分ごと化させるのが狙い。文言は LP ごとに差し替える。 配色は各 LP のブランド 3 色（navy / accent / white）だけで構成する。 本文のグレーや背景のトーンも navy / accent の不透明度違いで表現し、 4 色目を足さない。LP 別の値は下の :root ではなく #pain のカスタム プロパティ（--pain-navy / --pain-accent）だけを差し替えて切り替える。 演出は周辺セクションと同じ .scrollin（下からのスライドイン）に揃える。 #231 / #314 で全 LP の .scrollin は opacity:1 起点に統一済みのため、 Microsoft Clarity の再生・ヒートマップでも非表示にはならない。 ==============================================================*/ /* 建築LPの #pain は建設向けブランド 3 色（navy #0B2A3F / green #1AAB7D / white）で構成 */ /*============================================================ #pain の課題リスト 第 2 スクリーンでは読ませるより「当てはまる数」を見せた方が 自分ごと化が速いため、説明を持たせず一人称の課題 3 件だけを並べる。 ==============================================================*/ /* SP: ハンバーガーメニューを右下固定のフロートボタンにする （画面上部のヘッダー行から切り離し、常に見える位置でタップ可能にする） header 自身が position:fixed; z-index:100 で重ね合わせコンテキストを作るため、 .header-toggle の z-index だけ上げても .pagetop(z-index:1000) より前に出ない。 SP 幅では header ごと引き上げる。 */