@charset "UTF-8"; /* * line-mini-app の固有スタイル。共通部分は /lp/_shared/css/lp-base.css にある。 * * このファイルは lp-base.css / form-patch.css より後に読み込まれる。 * どちらの :root 既定値にも勝つので、色の上書きはここだけで完結する。 * * scripts/lp/split-lp-css.mjs が style.css からベースとの差分を抜き出して生成した。 * ベースと一致する 215 ルールを落とし、202 ルールを残している * （うち 1 ルールは、落とすとカスケードの勝敗が変わるため戻した）。 */ :root { /* フォーム UI のブランド色（/lp/_shared/css/form-patch.css が参照）。 既定（移行前も上書き無し）。 */ --lp-primary: #f14a00; --lp-primary-hover: #ef5924; } /* 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 ==============================================================*/ ::selection { background: #FFC370; } ::-moz-selection { background: #FFC370; } /* スクロール出現演出。要素は常に opacity:1（消えない）にして、下からの スライドイン(translateY)だけで演出する。理由: 初期 opacity:0 だと Microsoft Clarity のヒートマップ/再生（記録時 DOM を JS 非実行で再構築）で inview が発火せず opacity:0 のまま残り、要素が非表示に見えてしまうため。 */ /* ファーストビュー（#main 内の .scrollin・.scrollin_main）は従来どおりフェードイン演出を 維持する。Clarity でも記録時に必ず表示される領域なので opacity:0 のフェードのままでよい。 下部セクションの .scrollin は Clarity 対策で opacity:1 のまま据え置く。 */ #main .scrollin, #main .scrollin_main { opacity: 0; } #main .scrollin.fadeIn, #main .scrollin_main.fadeIn { opacity: 1; } .nav_flex { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 15px 0; } .header_link_list { display: flex; justify-content: space-between; align-items: center; } .cta { display: block; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); box-shadow: 0px 5px 10px rgba(40,65,160,0.2); color: #fff; -mos-transition: .5s ease-out all; -webkit-transition: .5s ease-out all; transition: .5s ease-out all; } .cta:hover { box-shadow: 0px 5px 15px rgba(40,65,160,0.5); } /*============================================================ body ==============================================================*/ /* ヒーローは medical / construction と同じ「明るい白基調の画像 1 枚」構成。 旧実装（暗い実写 mv_bg.png を背景にして h1/p を白文字で重ねる方式）は、 写真とテキストが分離して見え野暮ったかったため廃止。見出し・サブコピー・ アイコン・プロセス帯はすべて画像へ焼き込み済み。 */ #main{ margin-top: 53px; background: #fff; padding: 40px 160px 0; position: relative; } .mv_hero_img{ width: 100%; height: auto; display: block; border-radius: 20px; box-shadow: 0 8px 32px rgba(11,36,71,0.10); } @media screen and (min-width: 769px) { .mv_hero_img.sp { display: none; } } #achievement{ margin: 200px auto 102px; } #achievement .h2_text::before{ content: ""; position: absolute; top: -120px; left: 0; right: 0; width: 1px; height: 78px; margin: auto; background: linear-gradient(180deg, rgba(253,208,0,1) 0%, rgba(241,74,0,1) 100%); } .h2_text{ margin: 8px auto 30px; font-family: 'Montserrat', sans-serif; font-weight: bold; text-align: center; color: #F14A00; letter-spacing: 3px; } .industry_text{ margin-left: 40px; text-align: center; color: #F14A00; } /* #case-studies: 事例カード（リンクなし表示のみ） */ #case-studies{ padding: 72px 0; background: #faf8f3; } /* スワイプ可能を示すヒント */ .case-hint{ display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 16px; padding: 8px 16px; background: rgba(241,74,0,0.06); color: #F14A00; font-size: 1.3rem; font-weight: bold; border-radius: 20px; width: fit-content; } /* キャリッジ + ナビボタン用ラッパ */ /* 端のフェード（次/前にコンテンツがあることを示唆） */ .case-carousel::before{ left: 0; background: linear-gradient(90deg, #faf8f3 0%, rgba(250,248,243,0) 100%); } .case-carousel::after{ right: 0; background: linear-gradient(-90deg, #faf8f3 0%, rgba(250,248,243,0) 100%); } .case-nav{ position: absolute; top: calc(50% - 14px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #F14A00; border: 1px solid #eee5d4; box-shadow: 0 4px 14px rgba(0,0,0,0.12); font-size: 2.4rem; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; font-family: 'Montserrat', sans-serif; transition: background .2s, color .2s, transform .15s; } .case-nav:hover{ background: #F14A00; color: #fff; } /* 横スクロールカルーセル: 1カードずつ snap で見せる単列レイアウト */ .case-grid{ display: flex !important; flex-wrap: nowrap !important; gap: 24px; margin: 20px -20px 0; padding: 10px 20px 30px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-left: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #F14A00 transparent; list-style: none; } .case-grid::-webkit-scrollbar-thumb{ background: #F14A00; border-radius: 4px; } .case-card{ flex: 0 0 380px; max-width: 380px; scroll-snap-align: start; background: #fff; border: 1px solid #eee5d4; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); overflow: hidden; display: flex; flex-direction: column; list-style: none; position: relative; } .case-card__body{ position: relative; background: #fff; padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; z-index: 1; } .case-card__name{ font-size: 1.8rem; font-weight: bold; color: #222; line-height: 1.4; margin: 0; } .case-card__client{ font-size: 1.3rem; color: #666; } .case-card__desc{ font-size: 1.4rem; line-height: 1.6; color: #333; flex: 1; } .case-card__tag{ display: inline-block; padding: 4px 10px; background: rgba(241,74,0,0.08); color: #F14A00; font-size: 1.1rem; border-radius: 12px; font-weight: 500; } /* #strength: ONLY ONE + about 統合セクション */ #strength{ padding: 72px 0; background: #faf8f3; } .strength_box__cover{ width: 100%; aspect-ratio: 16 / 10; background: #faf6ec; overflow: hidden; } /* お悩みアイコンカード */ /* Before / After 比較 */ /* 3つのポイント: 横並びタイムライン */ /* 詳細アコーディオン */ .interview_content01 .link_icon{ display: inline-block; margin-left: 5px; } .accent-mark{ display: inline-block; background: linear-gradient(transparent 60%, rgba(241,74,0,0.25) 60%); padding: 0 2px; } #interview{ padding: 72px 0 0; background:rgba(241,141,0,0.2); } #interview .h2_ttl{ margin-bottom: 72px; } #interview h3{ font-size: 2.4rem; text-align: center; } #interview .interview_content_box h3{ text-align: left; margin-bottom: 20px; } .interview_content01_h3{ margin-bottom: 20px; } .interview_content01_h3{ padding-top: 40px; } .interview_content01{ margin-bottom: 60px; background: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.08); } .interview_content_box, .interview_content_box02_ri,.interview_content_box02_left { width: 50%; height: 327px; background: #fff; } .interview_content_box:first-child{ padding: 50px 40px; } .interview_content_box:nth-child(2){ padding: 38px 30px 0 10px; } .interview_content02{ padding: 50px 40px; margin-bottom: 60px; background: #fff; } .interview_content02_text02{ margin-bottom: 20px; } .interview_content02 h3{ margin-bottom: 40px; } .interview_img{ width: 70%; } .interview_content02_text03{ color: #F14A00; margin-top: 20px; } .interview_content02 a{ text-decoration: underline; color: #333333; } .interview_content03{ margin-top: 60px; padding: 54px 0; background: #F18D00; } .interview_content03 img{ margin:auto; } .interview_content03 .inner{ display: flex; justify-content: space-between; } .interview_content03_box{ margin-left: 80px; } #interview .interview_content03_box h3{ font-size: 2rem; margin-bottom: 10px; color: #fff; text-align: left; } .interview_content03_box p{ color: #fff; margin-bottom: 34px; } .interview_content03_box02{ display: flex; justify-content: space-between; flex-wrap: wrap; } .interview_wrap{ padding-bottom: 40px; } .interview_img_le{ padding: 0px 10px 0px 30px; } .interview_content_box02_left{ padding: 30px 10px 0px 30px; } .interview_img_ri{ padding: 0px 30px 0px 10px; } .interview_content_box02_ri{ padding: 0px 30px 0px 10px; height: auto; } .interview_img06{ width: 210px; } .interview_content_text span{ color: #F14A00; } .interview_content_text a{ text-decoration: underline; color: #333333; } .scheme-node{ position: relative; flex: 1; min-width: 180px; padding: 22px 18px; background: #fff; border: 1px solid rgba(241,74,0,0.2); border-radius: 12px; box-shadow: 0px 10px 24px rgba(0,0,0,0.05); } .scheme-node::after{ content: ""; position: absolute; top: 50%; right: -14px; width: 18px; height: 1px; background: #F14A00; transform: translateY(-50%); } .scheme-node::before{ content: ""; position: absolute; top: 50%; right: -14px; width: 8px; height: 8px; border-top: 2px solid #F14A00; border-right: 2px solid #F14A00; transform: translateY(-50%) rotate(45deg); } .scheme-label{ font-weight: bold; color: #F14A00; margin-bottom: 6px; } .faq_icon { width: 28px; } .question img { width: 24px; margin: 3px; } .radio-input:checked + .radio_text::after{ content: ""; display: block; position: absolute; top: 7px; left: 2px; width: 11px; height: 11px; background: #F14A00; border-radius: 50%; } .checkbox + .checkbox-icon::before{ content: ""; display: block; position: absolute; top: -4px; bottom: 0; left: -29px; width: 18px; height: 18px; margin: auto; background: #fff; border: 1px solid #F14A00; } .checkbox:checked + .checkbox-icon::before{ content: ""; display: block; position: absolute; top: -4px; bottom: 0; left: -29px; width: 18px; height: 18px; margin: auto; background: #fff; border: 1px solid #F14A00; } .checkbox:checked + .checkbox-icon::after{ content: ""; display: block; position: absolute; top: -9px; bottom: 0; left: -23px; width: 7px; height: 14px; margin: auto; transform: rotate(40deg); border-bottom: 3px solid #ef5924; border-right: 3px solid #ef5924; } .contact_req, .contact_any { position: absolute; top: 0; left: -70px; margin: auto; padding: 5px 11px; font-size: 1.4rem; font-weight: bold; color: #fff; background: #F14A00; } .contact_any { background: #7D7D7D; } .contact_btn { font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, sans-serif; cursor: pointer; } .privacy_txt::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: -20px; width: 18px; height: 18px; margin: auto; background: #fff; border: 1px solid #F14A00; } .checkbox_input:checked + .privacy_txt::after, .checkbox_input:checked + input + .privacy_txt::after { content: ""; display: block; position: absolute; top: -5px; bottom: 0; left: -14px; width: 7px; height: 14px; margin: auto; transform: rotate(40deg); border-bottom: 3px solid #ef5924; border-right: 3px solid #ef5924; } label.radio { width : 18px; height : 18px; border : 1px solid #F14A00; border-radius : 100%; } .contact_btn{ display: block; margin: 32px auto; padding: 15px 154px; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); box-shadow: 0px 5px 10px rgba(40,65,160,0.3); font-size: 2.4rem; font-weight: bold; border-radius: 50px; letter-spacing: 3px; color: #fff; -mos-transition: .5s ease-out all; -webkit-transition: .5s ease-out all; transition: .5s ease-out all; } .contact_btn:hover { box-shadow: 0px 5px 15px rgba(40,65,160,0.5); } #info{ border-top: 2px solid rgba(241,141,0,0.2); margin: 40px auto 40px; letter-spacing: 0; } footer{ padding: 15px 0; background: #F18D00; color: #fff; text-align: center; } .pagetop a { position: fixed; display: block; width: 205px; padding: 15px 0; text-decoration: none; color: #fff; font-weight: bold; text-align: center; border-radius: 50px; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); letter-spacing: 3px; z-index: 1000; transition: 0.5s ease all; } .pagetop a:hover { box-shadow: 0px 5px 20px rgba(40,65,160,0.4); } /*============================================================ breakpoint 1700px ==============================================================*/ /*============================================================ breakpoint 1500px ==============================================================*/ /*============================================================ breakpoint 1000px ==============================================================*/ @media screen and (max-width: 1000px) { .interview_content_box { width: 100%; height: auto; } .interview_content01 img { margin:0 auto 30px; } .interview_content_box:first-child { padding: 84px 40px 30px; } .interview_wrap.reverse{ flex-wrap: wrap-reverse; } .interview_content03_box02{ display: block; } .interview_content03_box02 img{ margin: auto; } .interview_content03 .app_btn img{ margin: 20px auto; } .interview_content_box02_left,.interview_content_box, .interview_content_box02_ri, .interview_content_box02_left { width: 100%; height: auto; } .interview_img_le, .interview_content_box02_left,.interview_img_ri, .interview_content_box02_ri{ padding:10px 30px 20px; } .interview_content_box:nth-child(2){ padding: 10px 30px 20px; } .interview_content03 .inner{ flex-wrap: wrap; } .interview_content03 img { margin: auto; } } /*============================================================ breakpoint 768px ==============================================================*/ @media screen and (max-width: 768px) { #main{ margin: 36px auto 0; padding: 16px 16px 0; } .mv_hero_img{ border-radius: 12px; } .header-cta{ padding: 19.6px; background: linear-gradient(90deg, rgba(54,193,214,1) 0%, rgba(3,80,156,1) 100%); margin-right: 0; } .header-address{ display: none; } .interview_content03 .inner{ flex-wrap: wrap; } .interview_content03 img{ margin: auto; } .interview_content03_box{ margin: 20px auto; } .interview_content03_box02{ display: flex; justify-content: space-between; flex-wrap: wrap; } .interview_content03_box02 a{ display: block; margin: 5px auto; } .contact_tbl th{ display: block; } .contact_tbl th{ margin-left: 50px; } } /*============================================================ breakpoint 680px-sp ==============================================================*/ @media screen and (max-width: 480px) { .interview_content_box:first-child{ padding: 40px 30px 20px; } .interview_content_box:nth-child(2){ padding: 0 30px 20px; } .interview_content02{ padding: 30px; } .interview_content01 .interview_wrap img{ padding: 30px 30px 0; } #interview h3{ margin-bottom: 20px; font-size: 2rem; } .interview_content01_h3{ margin-bottom: 20px; } .contact_btn{ width: 100%; padding: 15px; } .info_tel{ letter-spacing: -2px; } .interview_wrap{ margin-bottom: 30px; } .interview_content01 img{ padding: 0 30px 30px; } .interview_img_le, .interview_content_box02_left, .interview_img_ri, .interview_content_box02_ri { padding: 30px ; } .interview_content_box:nth-child(2) { padding: 0 30px; } .interview_content03 img,.interview_content03 .app_btn img,.interview_content03_box02 a{ margin: auto; } .interview_content03_box02{ align-items: center; } .interview_content01 .link_icon{ display: inline-block; margin: 0 0 0 5px; padding: 0; } } /*============================================================ breakpoint 375px-sp ==============================================================*/ /*============================================================ breakpoint 320px-SE ==============================================================*/ @media screen and (max-width: 320px) { .h2_text { text-align: center; font-size: 0.875rem; letter-spacing: 0.25em; color: #f97316; font-weight: 600; margin-bottom: 16px; } .service-item:hover { border-color: #f97316; box-shadow: 0 4px 20px rgba(249, 115, 22, 0.15); } .service-icon { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border: 2px solid #fdba74; border-radius: 16px; margin-bottom: 16px; transition: all 0.3s ease; } .service-item:hover .service-icon { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); border-color: #f97316; transform: scale(1.05); } .service-icon svg { width: 32px; height: 32px; color: #ea580c; } } /*============================================================ Service List (15 Items / Image Style) ==============================================================*/ #service-list { background: #f4f8fb; /* 画像に合わせた薄いグレーの背景 */ padding: 72px 0; } .service-grid-new { display: grid; grid-template-columns: repeat(5, 1fr); /* 5列構成 */ gap: 20px; list-style: none; padding: 0; margin: 0; } .service-item-new { background: #ffffff; border-radius: 12px; padding: 30px 15px; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: all 0.3s ease; border: 1px solid #eef2f6; display: flex; flex-direction: column; } .service-icon-new { width: 70px; height: 70px; margin: 0 auto 15px; display: flex; align-items: center; justify-content: center; } .service-icon-new svg { width: 44px; height: 44px; } .service-item-new h3 { font-size: 1.7rem; color: #03509C; /* からくりネイビー */ margin-bottom: 12px; font-weight: bold; letter-spacing: 0.5px; } .service-item-new p { font-size: 1.25rem; line-height: 1.6; color: #555; margin: 0; text-align: left; /* 説明文は左寄せの方が見やすいため調整 */ } /* レスポンシブ調整 */ /* 比較図（SVG画像）のコンテナ */ /* サービスカード */ /* カードサマリー（強調テキスト） */ /* 例ボックス */ /* 課題セクション（legacy-issuesを流用） */ /* 進め方（service_stepsを流用） */ /* フロー図（service-schemeを流用） */ /* レスポンシブ */ /*============================================================ example-box スタイル ※ #renewal-service と #dev-process 共通で使用 ※ style.css の末尾に追記してください ==============================================================*/ /* カードサマリー（強調テキスト） */ .card-summary { font-size: 1.6rem; font-weight: bold; color: #F14A00; margin-bottom: 15px; line-height: 1.5; } /* サブタイトル */ /* 例ボックス */ .example-box { background: #fafafa; border-left: 4px solid #F14A00; padding: 18px 20px; margin-top: 20px; } .example-title { margin: 0 0 12px 0; font-weight: bold; color: #F14A00; font-size: 1.4rem; } /* 課題セクションの補足テキスト */ .issues-note { margin-top: 20px; font-weight: bold; color: #F14A00; font-size: 1.5rem; } /* レスポンシブ */ /*============================================================ STRENGTH カード: SP は 1 列・画像左 + テキスト右（縦長解消） 既存の repeat(2,1fr) 指定が効いていないため #strength 詳細度で上書き ==============================================================*/ @media screen and (max-width: 600px) { #strength .strength_grid{ grid-template-columns: 1fr; gap: 12px; } #strength .strength_box{ display: grid; grid-template-columns: 92px 1fr; grid-template-areas: "cover title" "cover text"; column-gap: 14px; row-gap: 6px; align-items: center; text-align: left; padding: 14px; } #strength .strength_box__cover{ grid-area: cover; width: 92px; aspect-ratio: 1 / 1; border-radius: 8px; align-self: start; } #strength .strength_box__title{ grid-area: title; text-align: left; padding: 0; margin: 0; } #strength .strength_box__text{ grid-area: text; padding: 0; } } /*============================================================ 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 の再生・ヒートマップでも非表示にはならない。 ==============================================================*/ #pain { --pain-navy: #031d36; --pain-navy-rgb: 3, 29, 54; --pain-accent: #f14a00; --pain-accent-rgb: 241, 74, 0; margin: 70px auto 44px; } #pain .h2_ttl { margin-bottom: 24px; color: var(--pain-navy); } #pain .pain_bridge { margin-top: 40px; padding: 30px 24px; text-align: center; border-radius: 10px; background: var(--pain-navy); box-shadow: 0 6px 20px rgba(var(--pain-navy-rgb), 0.18); } #pain .pain_bridge__ttl { margin: 0 0 10px; font-size: 2.2rem; font-weight: bold; line-height: 1.6; color: #fff; } #pain .pain_cta { display: inline-block; min-width: 340px; padding: 16px 40px; font-size: 1.9rem; font-weight: bold; line-height: 1.4; text-align: center; letter-spacing: 1px; color: #fff; border-radius: 45px; background: var(--pain-accent); box-shadow: 0 5px 12px rgba(var(--pain-accent-rgb), 0.35); transition: 0.3s ease all; } #pain .pain_cta:hover { box-shadow: 0 5px 18px rgba(var(--pain-accent-rgb), 0.55); } @media screen and (max-width: 1000px) { #pain { margin: 50px auto 34px; } } @media screen and (max-width: 768px) { #pain { margin: 40px auto 24px; } #pain .pain_bridge { margin-top: 26px; padding: 24px 18px; } #pain .pain_bridge__ttl { font-size: 1.8rem; } #pain .pain_cta { display: block; min-width: 0; width: 100%; padding: 15px 20px; font-size: 1.6rem; } } /*============================================================ #pain の課題リスト 第 2 スクリーンでは読ませるより「当てはまる数」を見せた方が 自分ごと化が速いため、説明を持たせず一人称の課題 3 件だけを並べる。 ==============================================================*/ #pain .pain_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; padding: 0; margin: 0; } #pain .pain_list li { display: flex; align-items: flex-start; gap: 12px; padding: 20px; font-size: 1.7rem; font-weight: bold; line-height: 1.6; color: var(--pain-navy); background: #fff; border-left: 4px solid var(--pain-accent); border-radius: 10px; box-shadow: 0 4px 14px rgba(var(--pain-navy-rgb), 0.08); } #pain .pain_list li::before { content: "✓"; flex: none; font-size: 1.6rem; line-height: 1.7; color: var(--pain-accent); } @media screen and (max-width: 1000px) { #pain .pain_list { grid-template-columns: 1fr; gap: 12px; } } @media screen and (max-width: 768px) { #pain .pain_list { grid-template-columns: 1fr; gap: 10px; } #pain .pain_list li { padding: 14px 16px; font-size: 1.5rem; } #pain .pain_list li::before { font-size: 1.4rem; } }