@charset "UTF-8"; /* ===================================================================== PERSOL 法人サイト — カテゴリページ 共通スタイル（全トークン＋全コンポーネント） フォント: 和文=Noto Sans JP / 英数=Gotham SSm（本番サイト指定を流用） ===================================================================== */ /* --- フォント読込 --- */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"); /* 英数=Gotham SSm（--font-en で指定）は、各HTMLが でホットリンクしている 本番chrome CSS（persol-group.co.jp の common.css / style.css 等）側が読み込むため、 この style.css 単体での @import は不要（重複読込・本環境での 403 を避けるため意図的に持たない）。 */ /* ===================================================================== トークン（CSS変数） ===================================================================== */ :root{ /* color — base */ --c-black:#000000; --c-text:#53565A; /* base/70 - main（本文標準・見出しバー背景） */ --c-text-sub:#97999B; /* base/40 - sub */ --c-border:#D9D9D6; /* base/30 */ --c-bg-light:#F0F0EF; /* base/10 - border,bg */ --c-white:#FFFFFF; /* base/0 */ /* color — primary(teal) / secondary(navy) / tertiary */ --c-primary:#00BFB3; --c-primary-hover:#66D8D1; --c-secondary:#002855; --c-secondary-hover:#667D99; --c-orange:#FF8200; --c-yellow:#FFB81C; --c-attention:#DC2626; --c-mono-30:#BCBCBC; --c-mono-20:#D7D7D7; /* font */ --font-jp:"Noto Sans JP","メイリオ","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",sans-serif; --font-en:sans-serif; --ls-jp:normal; /* 和文＝本番body準拠（letter-spacing:normal）。旧0.06emは広すぎたため本番に合わせて変更 */ --ls-en:0.2em; /* 本番Gotham実値 */ /* layout */ --container:1288px; /* business系コンテナ */ --inner:1200px; /* 本文2カラム枠 */ --sidemenu:300px; --col-gap:80px; /* shadow */ --shadow-soft:0px 4px 16px 0 rgba(83,86,90,0.08); --shadow-card:0px 6px 15px 0 rgba(0,0,0,0.16); --shadow-hover:0px 6px 18px 0 rgba(83,86,90,0.35); /* 本番カードhover */ } /* ===================================================================== リセット / ベース ===================================================================== */ *,*::before,*::after{box-sizing:border-box;} html{font-size:62.5%;} /* 1rem=10px */ body{ margin:0; font-family:var(--font-jp); font-size:1.6rem; line-height:1.75; letter-spacing:var(--ls-jp); color:var(--c-text); background:var(--c-white); -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%;height:auto;} a{color:inherit;text-decoration:none;transition:opacity .2s;} a:hover{opacity:.6;} /* 文中テキストリンク：本文段落内のインラインリンクは下線＋テキストから4px下げる（カード全体リンク等は対象外） */ .main p a{text-decoration:underline;text-underline-offset:4px;} ul,ol{margin:0;padding:0;list-style:none;} p{margin:0;} /* 英数・数字（Gotham）ユーティリティ */ .en{font-family:var(--font-en);font-weight:normal;letter-spacing:var(--ls-en);} /* 見出しのUAマージン除去＋クラス方針（本文=.layout 配下のみ。chrome[l-header/l-footer/c-page-title]は本番CSSに委ね、見出しウェイトを保つ） */ .layout :where(h1,h2,h3,h4,h5,h6){margin:0;font-weight:inherit;font-size:inherit;} /* スクリーンリーダー専用（視覚非表示）。FVのH1等に使用 */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ===================================================================== 流用チロム（画像。本番組込時にWPテーマへ差し替え） ===================================================================== */ .chrome{width:100%;} .chrome img{width:100%;height:auto;} /* ===================================================================== FV（ページタイトル）— 本番 .c-page-title 準拠。背景のみ画像、要素はコードで実装 ===================================================================== */ .fv{ position:relative;width:100%;height:400px;display:flex;align-items:center; background:url("../img/placeholder.svg") no-repeat 50% 0 / cover; } .fv__inner{width:100%;max-width:1240px;margin:0 auto;padding:0 20px;} .fv__box{background:var(--c-white);width:520px;max-width:100%;border-radius:4px;padding:24px 36px; box-shadow:var(--shadow-soft);} /* PC白枠幅=520px固定（SPは width:100%・縦幅成り行き） */ .fv__title{font-size:3.2rem;font-weight:700;line-height:1.3;color:var(--c-text);} .fv__lead{margin-top:10px;font-size:1.6rem;font-weight:400;line-height:1.5;color:var(--c-text);} .fv__contact{margin-top:20px;display:flex;flex-direction:column;gap:12px;} /* FVのCTAは共通コンポーネント .btn-primary.btn-primary--block を使用（旧 .fv__link は廃止） */ .fv__telrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .fv__time{font-size:1.1rem;font-weight:500;line-height:1.7;color:var(--c-text);} .fv__heading{display:block;font-size:1.35rem;font-weight:700;line-height:1.7;color:var(--c-text);} .fv__number{ display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap; font-family:var(--font-en);font-size:2.8rem;font-weight:500;line-height:1.2;color:var(--c-primary); } .fv__telicon{flex-shrink:0;width:18px;height:24px;color:var(--c-primary);} /* 電話アイコン＝インラインSVG（mask非依存で確実に表示） */ /* パンくず（コードで構築・ページ固有）。本番同様、長い場合は折り返さず横スクロール */ .breadcrumb{background:var(--c-white);} .breadcrumb__inner{ height:48px;padding:0 40px; /* バー高 PC=48px */ font-size:1.2rem;line-height:1; color:var(--c-text); display:flex;flex-wrap:nowrap;gap:16px;align-items:center; white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; scrollbar-width:none; /* Firefox: スクロールバー非表示 */ } .breadcrumb__inner::-webkit-scrollbar{display:none;} /* WebKit: 非表示 */ .breadcrumb__inner>*{flex-shrink:0;} /* 区切り＝シェブロン（4×8相当の細い「>」） */ .breadcrumb__sep{ width:6px;height:6px;display:inline-block; border-top:0.5px solid var(--c-text);border-right:0.5px solid var(--c-text); /* 線の太さ＝border幅で調整 */ transform:rotate(45deg); } .breadcrumb a:hover{opacity:.6;} /* ===================================================================== 2カラムレイアウト ===================================================================== */ .layout{ max-width:1280px; /* 内側2カラム=1200px＋左右padding40px */ margin:0 auto; padding:120px 40px 80px; /* PC左右padding=40px */ } .layout__inner{ display:grid; grid-template-columns:var(--sidemenu) 1fr; gap:var(--col-gap); align-items:start; } .main{min-width:0;} /* ===================================================================== サイドメニュー ===================================================================== */ .sidemenu{position:sticky;top:24px;display:flex;flex-direction:column;gap:40px;} .sidemenu__title{ font-size:1.8rem;font-weight:700;line-height:1; /* head/18-B */ color:var(--c-text); } .sidemenu__list{margin-top:16px;border-top:1px solid var(--c-border);} /* リスト項目は行全体がクリック可能（aを行全幅のflexコンテナに） */ .sidemenu__item{ display:flex;align-items:center;justify-content:space-between; gap:8px;padding:8px 0;border-bottom:1px solid var(--c-border); width:100%;font-size:1.4rem;line-height:1.5;color:var(--c-text); /* body-150/14-R */ } .sidemenu__item .label{flex:1;min-width:0;} .sidemenu__item .arrow{color:var(--c-text);flex-shrink:0;font-size:1.2rem;line-height:1;} /* グレー（teal不可） */ /* サイドメニューのCTAは .btn-primary.btn-primary--block（M-48・全幅）を使用 */ /* ===================================================================== セクション見出しバー（グレー #53565A ＋白Bold28） ===================================================================== */ .sec{margin-bottom:80px;} /* 右カラム セクション間 80px */ .sec:last-child{margin-bottom:0;} .sec__head{ background:var(--c-text); /* base/70 #53565A */ color:var(--c-white); font-weight:700; font-size:2.8rem;line-height:1.5;letter-spacing:var(--ls-jp); /* 本番準拠 normal */ padding:12px 24px; } .sec__lead{ margin-top:40px; font-size:1.6rem;line-height:1.75;color:var(--c-text); } /* ===================================================================== カード共通 ===================================================================== */ .cardgrid{display:grid;gap:24px;margin-top:40px;} .cardgrid--2{grid-template-columns:repeat(2,1fr);} .cardgrid--3{grid-template-columns:repeat(3,1fr);} /* タグ（汎用） */ .tag{display:inline-flex;align-items:center;justify-content:center; font-size:1.2rem;font-weight:400;line-height:1;padding:4px 8px;white-space:nowrap;} .tag--teal{background:var(--c-primary);color:var(--c-white);} .tag--yellow{background:var(--c-yellow);color:var(--c-white);} .tag--navy{background:var(--c-secondary);color:var(--c-white);} .tag--navyline{background:var(--c-white);border:1px solid var(--c-secondary);color:var(--c-secondary);} .tagrow{display:flex;flex-wrap:wrap;gap:4px;} /* cue（building-2アイコン＋三角＋淡グレーcallout）共通 */ .cue{display:flex;align-items:center;gap:0;width:100%;} /* 三角↔枠は密着 */ .cue .ico{width:24px;height:24px;flex-shrink:0;color:var(--c-text-sub);margin-right:8px;} /* アイコン↔三角のみ8px */ .cue .tri{ width:0;height:0;border-style:solid;flex-shrink:0; border-width:4px 6px 4px 0;border-color:transparent var(--c-bg-light) transparent transparent; /* コメント枠背景と同色 */ } .cue__box{ flex:1;background:var(--c-bg-light);border-radius:4px; padding:8px 12px;font-size:1.2rem;font-weight:700;line-height:1.5;color:var(--c-text); } /* カテゴリ：サブカテゴリカード（見出し↔文章=8px / 以降=16px） */ .subcat-card{ display:flex;flex-direction:column;gap:8px;justify-content:center; background:var(--c-white);box-shadow:var(--shadow-soft);padding:24px; } .subcat-card__title{font-size:2.0rem;font-weight:700;line-height:1.5;color:var(--c-text);} .subcat-card__desc{font-size:1.4rem;font-weight:400;line-height:1.75;color:var(--c-text);} .subcat-card__tag{align-self:flex-start;margin-top:8px;background:var(--c-secondary);color:var(--c-white); font-size:1.2rem;line-height:1;padding:4px 8px;} /* 8(gap)+8=16 */ .subcat-card__cue{margin-top:8px;} /* 16 from tag */ .subcat-card__cue{display:flex;align-items:center;gap:0;} /* 三角↔枠は密着 */ .subcat-card__cue .ico{width:24px;height:24px;flex-shrink:0;color:var(--c-text-sub);margin-right:8px;} /* アイコン↔三角のみ8px */ .subcat-card__cue .tri{width:0;height:0;border-style:solid;flex-shrink:0; border-width:4px 6px 4px 0;border-color:transparent var(--c-bg-light) transparent transparent;} /* コメント枠背景と同色 */ .subcat-card__callout{flex:1;background:var(--c-bg-light);border-radius:4px; padding:8px 12px;font-size:1.2rem;font-weight:700;line-height:1.5;color:var(--c-text);} /* サービスカード（縦積み：ロゴ箱＋社名＋title＋desc＋cue） */ .svc-list{display:flex;flex-direction:column;gap:24px;margin-top:40px;} .svc-card{display:flex;flex-direction:row;gap:16px;align-items:stretch; background:var(--c-white);box-shadow:var(--shadow-soft);padding:24px;} /* 左＝ロゴカラム / 右＝社名・タイトル・説明・cue（gap16） */ .svc-card__logo{width:200px;flex-shrink:0;border:1px solid var(--c-bg-light);align-self:stretch; display:flex;align-items:center;justify-content:center;background:var(--c-white);padding:7px;} /* ロゴカラム PC幅200px・高さフル・内側padding4px */ .svc-card__logo img{width:100%;height:100%;object-fit:contain;} /* 内側padding0・画像縦幅をカラムにフィット（contain） */ .svc-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;} /* 右カラム：メタグループ↔cue=16px */ .svc-card__meta{display:flex;flex-direction:column;gap:8px;min-width:0;} /* 社名・タイトル・説明=8px間隔 */ .svc-card__company{font-size:2.0rem;font-weight:700;line-height:1.5;color:var(--c-text);} /* サービス名=h3文字（teal廃止） */ .svc-card__title{font-size:2.0rem;font-weight:700;line-height:1.5;color:var(--c-text);} .svc-card__desc{font-size:1.4rem;font-weight:400;line-height:1.75;color:var(--c-text);} /* 事例/記事カード（縦：画像408:229＋タグ＋日付＋title） */ .media-card{background:var(--c-white);box-shadow:var(--shadow-soft);display:flex;flex-direction:column;overflow:hidden;} .media-card__thumb{aspect-ratio:408/229;background:var(--c-bg-light);overflow:hidden;} .media-card__thumb img{width:100%;height:100%;object-fit:cover;} .media-card__body{padding:24px;display:flex;flex-direction:column;gap:16px;} .media-card__date{font-size:1.4rem;font-weight:400;line-height:1;color:var(--c-text-sub);} .media-card__title{font-size:1.6rem;font-weight:400;line-height:1.5;color:var(--c-text);} .media-card__kw{display:flex;flex-wrap:wrap;gap:6px;} /* カードhover（本番準拠：opacity .6 ＋ 影 ＋ 画像 scale1.1） */ .subcat-card,.svc-card,.media-card{transition:opacity .3s ease,box-shadow .3s ease;} .subcat-card:hover,.svc-card:hover,.media-card:hover{box-shadow:var(--shadow-hover);} /* opacityはa:hoverで .6 */ .media-card__thumb img{transition:transform .3s ease;} .media-card:hover .media-card__thumb img{transform:scale(1.1);} /* ===================================================================== テキストブロック（目的・選び方など） ===================================================================== */ .deflist{margin-top:40px;display:flex;flex-direction:column;gap:24px;} .deflist__term{font-size:1.8rem;font-weight:700;line-height:1.5;color:var(--c-text);margin-bottom:8px;} .deflist__desc{font-size:1.6rem;line-height:1.75;color:var(--c-text);} /* チェックリスト（ティール✓16px＋本文16R） */ .checklist{margin-top:40px;display:flex;flex-direction:column;gap:16px;} .checklist__item{display:flex;gap:8px;align-items:center;font-size:1.6rem;line-height:1.5;color:var(--c-text);} .checklist__item::before{ content:"";flex-shrink:0;width:11px;height:6px;margin:0 2px; border:solid var(--c-primary);border-width:0 0 2px 2px;transform:rotate(-45deg); } /* ステップ（導入の流れ：Gotham番号32＋縦線） */ .steplist{margin-top:40px;} .step{display:flex;gap:16px;align-items:stretch;} .step__no{width:32px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:8px;} .step__num{font-family:var(--font-en);font-weight:400;font-size:3.2rem;line-height:1;color:var(--c-primary);text-align:center;letter-spacing:var(--ls-en);} .step__line{flex:1;width:1px;background:var(--c-border);} .step:last-child .step__line{display:none;} .step__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;padding-bottom:24px;} .step__title{font-size:1.8rem;font-weight:700;line-height:1.5;color:var(--c-text);} .step__desc{font-size:1.6rem;line-height:1.75;color:var(--c-text);} /* FAQ（Q=Gotham32 teal＋質問18B＋回答16R・上下border） */ .faq{margin-top:40px;} .faq__item{display:flex;gap:16px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--c-border);} .faq__item:last-child{border-bottom:1px solid var(--c-border);} .faq__q-icon{font-family:var(--font-en);font-weight:400;font-size:3.2rem;line-height:1;color:var(--c-primary);width:32px;flex-shrink:0;text-align:center;letter-spacing:var(--ls-en);} .faq__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;} .faq__qrow{display:flex;gap:16px;align-items:flex-start;cursor:pointer;} /* アコーディオン: クリックで開閉 */ .faq__qtext{flex:1;min-width:0;font-size:1.8rem;font-weight:700;line-height:1.5;color:var(--c-text);} .faq__toggle{flex-shrink:0;width:24px;height:24px;color:var(--c-text-sub);} /* lucideアイコンで±のサイズを統一 */ .faq__toggle::before{content:"";display:block;width:24px;height:24px;background-color:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E") no-repeat center/contain;} /* lucide plus */ .faq__item.is-open .faq__toggle::before{ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");} /* lucide minus */ .faq__a{font-size:1.6rem;line-height:1.75;color:var(--c-text);display:none;} /* 既定は閉 */ .faq__item.is-open .faq__a{display:block;} /* ===================================================================== 表（比較表 / 料金表） ===================================================================== */ .tbl{margin-top:40px;width:100%;border-collapse:collapse;font-size:1.4rem;line-height:1.5;color:var(--c-text);} .tbl th,.tbl td{border:1px solid var(--c-text);background:var(--c-white);padding:12px 16px;text-align:left;vertical-align:top;font-weight:400;} .tbl thead th{background:var(--c-border);color:var(--c-text);font-weight:400;} /* ヘッダ=#D9D9D6 / regular */ .tbl tbody th{background:var(--c-white);font-weight:400;white-space:normal;} /* 1列目も白・regular */ .tbl a{color:var(--c-text);text-decoration:underline;font-weight:400;} /* ===================================================================== 「一覧へ」ボタン（96:4：16px・Bold＋regular矢印・gap24・下線2px・中央） ===================================================================== */ .morelist{margin-top:24px;display:flex;justify-content:center;} .morelist a{ display:inline-flex;align-items:center;justify-content:center;gap:24px; padding:16px;border-bottom:2px solid var(--c-text); font-size:1.6rem;line-height:1;color:var(--c-text); } .morelist__label{font-weight:700;} .morelist__arrow{font-weight:400;} /* ===================================================================== 詳細画面（service-detail）— main 820 ＋ sticky aside 300 ===================================================================== */ .layout-detail{display:grid;grid-template-columns:1fr 300px;gap:80px;align-items:start;} .detail-main{min-width:0;} .detail-title{font-size:3.2rem;font-weight:700;line-height:1.5;color:var(--c-text);margin:0;} /* body-150/32-B・イントロ内（gap40で配置） */ .detail-intro{display:flex;flex-direction:column;gap:40px;margin-bottom:80px;} .detail-hero{width:100%;overflow:hidden;} .detail-hero img{width:100%;height:auto;display:block;} .detail-lead{font-size:1.6rem;line-height:1.75;color:var(--c-text);} /* 資料請求box */ .dl-box{background:var(--c-bg-light);padding:40px;display:flex;flex-direction:column;gap:24px;align-items:center;text-align:center;} .dl-box__title{font-size:2.0rem;font-weight:700;line-height:1.5;color:var(--c-secondary); border-bottom:3px solid var(--c-secondary);padding-bottom:2px;} .dl-box__text{width:100%;font-size:1.6rem;line-height:2;color:var(--c-text);} /* body-200/16-R */ /* 資料DLボタンは .btn-primary.btn-primary--lg（L-56）を使用 */ /* 目次（白地＋4px枠／リンク=navy下線） */ .toc{border:4px solid var(--c-bg-light);padding:40px;display:flex;flex-direction:column;gap:24px;} .toc__title{font-size:2.0rem;font-weight:700;line-height:1;color:var(--c-text);} .toc__list{display:flex;flex-direction:column;gap:16px;} .toc__item{display:flex;gap:9px;align-items:center;font-size:1.6rem;line-height:1.5;color:var(--c-text);} .toc__item a{flex:1;min-width:0;color:var(--c-secondary);text-decoration:underline;} /* スペック表（ラベル列=#D9D9D6 / 値=白） */ .spec-tbl{margin-top:24px;width:100%;border-collapse:collapse;font-size:1.4rem;line-height:1.5;color:var(--c-text);} .spec-tbl th,.spec-tbl td{border:1px solid var(--c-text);padding:12px 16px;text-align:left;vertical-align:top;font-weight:400;} .spec-tbl th{background:var(--c-border);width:200px;font-weight:400;} .spec-tbl td{background:var(--c-white);} .spec-note{margin-top:16px;font-size:1.2rem;line-height:1.5;color:var(--c-text-sub);} /* 小見出し（左ボーダー2px＋24B） */ .subhead{font-size:2.4rem;font-weight:700;line-height:1.5;color:var(--c-text); border-left:2px solid var(--c-text);padding-left:16px;} /* 特長（feat-item：Gotham32番号＋本文） */ .featlist{margin-top:24px;display:flex;flex-direction:column;gap:24px;} .feat{display:flex;gap:16px;align-items:flex-start;} .feat__no{font-family:var(--font-en);font-weight:400;font-size:3.2rem;line-height:1;color:var(--c-primary);width:32px;flex-shrink:0;text-align:center;letter-spacing:var(--ls-en);} .feat__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;} .feat__title{font-size:1.8rem;font-weight:700;line-height:1.5;color:var(--c-text);} .feat__desc{font-size:1.6rem;line-height:1.75;color:var(--c-text);} /* ===================================================================== Primary ボタン teal地・白Noto Bold・角丸なし・padding 0 24・gap16・矢印→ サイズ: M=48/16px（既定） / L=56/18px / S=40/14px ===================================================================== */ .btn-primary{ display:inline-flex;align-items:center;justify-content:center;gap:16px; height:48px;padding:0 24px;background:var(--c-primary);color:var(--c-white); font-weight:700;font-size:1.6rem;line-height:1;white-space:nowrap;text-align:center; } .btn-primary--lg{height:56px;font-size:1.8rem;} /* size L - 56 */ .btn-primary--sm{height:40px;font-size:1.4rem;} /* size S - 40 */ .btn-primary--block{width:100%;} /* 全幅インスタンス（サイドメニュー等） */ .btn-primary:hover{opacity:.6;} /* State=Hover */ .sec-cta{margin-top:40px;display:flex;justify-content:center;} /* aside（sticky・バナー画像2点） */ .detail-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:40px;} .detail-aside img{width:100%;height:auto;display:block;} /* ===================================================================== 流用チロムの PC/SP 切替（ 併用。BP=960px） ===================================================================== */ .chrome__pc{display:block;} .chrome__sp{display:none;} /* ===================================================================== レスポンシブ（≤960px：SP単カラム） ===================================================================== */ @media screen and (max-width:960px){ /* chrome 画像の切替（imgのdisplayトグル方式の保険。未対応時用） */ .chrome__pc{display:none;} .chrome__sp{display:block;} .breadcrumb__inner{height:40px;padding:0 16px;} /* バー高 SP=40px */ /* FV（SP）：背景=SP画像(contain・上)、白ボックスは画像下に重ねる（本番準拠）。縦幅は成り行き（height/width固定なし） */ .fv{height:auto;align-items:stretch;padding-top:118px; background-image:url("../img/placeholder.svg");background-size:contain;background-position:50% 0;} .fv__inner{padding:0 20px;} .fv__box{width:100%;height:auto;margin-bottom:40px;padding:20px;} /* SPは全幅・縦幅成り行き */ .fv__title{font-size:2.4rem;} .fv__lead{margin-top:8px;font-size:1.2rem;} .fv__contact{margin-top:16px;} .fv__number{font-size:2.1rem;} .fv__time{font-size:1.0rem;} .fv__heading{font-size:1.2rem;} /* 単カラム化：sidemenu→main の縦積み（DOM順） */ .layout{padding:80px 16px 60px;} .layout__inner{grid-template-columns:1fr;gap:48px;} .sidemenu{position:static;gap:40px;} .sec{margin-bottom:56px;} .sec__head{font-size:2.4rem;} /* SP：H2見出し 28→24px */ .sec__lead{margin-top:24px;} /* カードは1カラム積み */ .cardgrid--2,.cardgrid--3{grid-template-columns:1fr;} /* svc-card：SPは縦並び・ロゴカラムはフル幅×高さ80px */ .svc-card{flex-direction:column;} .svc-card__logo{width:100%;height:80px;align-self:auto;} /* 表：4列の比較表は横スクロール、3列の料金表は収まる */ .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;} .tbl--cmp{min-width:600px;} /* 詳細画面：単カラム化（asideを最下部へ）・spec表は横スクロール */ .layout-detail{grid-template-columns:1fr;gap:48px;} .detail-aside{position:static;} .spec-tbl{min-width:480px;} .detail-title{font-size:2.4rem;} /* SPのH1は24px */ } /* ===================================================================== カテゴリページ（hr / outsourcing / consulting）追加コンポーネント ─ いずれもトークンにバインド。既存DS部品（.svc-card/.feat/.media-card/.faq/.morelist）を流用し、 不足分（サービスグループ/お悩みカード/中間CTA/事例の社名ラベル/FV背景カテゴリ別）のみ定義。 ===================================================================== */ /* サービスグループ（H3小見出し .subhead ＋導入文＋svc-card群） */ .svc-group{margin-top:24px;background:var(--c-bg-light);padding:24px;} /* カテゴリごとに背景グレー */ .svc-group__intro{margin-top:16px;font-size:1.6rem;line-height:1.75;color:var(--c-text);} .svc-group .svc-list{margin-top:24px;} /* お悩みカード（issue-card：白box＋ボーダー／タイトル＋本文＋「解決できるサービス」行） */ .issue-card{display:flex;flex-direction:column;height:100%; background:var(--c-white);border:1px solid var(--c-border);padding:24px;} /* シャドウ無し＋ボーダー */ .issue-card__title{font-size:2.0rem;font-weight:700;line-height:1.5;color:var(--c-text);} /* 見出し20px */ .issue-card__body{flex:1;margin-top:16px; font-size:1.6rem;line-height:1.75;color:var(--c-text);} /* 説明は1段落（改行無し）／本文16px */ /* 「解決できるサービス」バー（罫線・ロゴ・見出し）は #21 で撤去。カードはタイトル＋本文のみ */ /* 事例カード（media-card）の社名ラベル */ .media-card__company{font-size:1.4rem;font-weight:700;line-height:1.4;color:var(--c-primary);} /* CTA（中段＝お悩み下／フッター上）。本番トップ .p-contact を実測値で再現 ＝白地・padding32／lead 28px/400中央／teal大ボタン 36px/700・最大900×min101／電話 */ .cta-block{margin-top:40px;background:var(--c-white);border:8px solid var(--c-bg-light);padding:32px;text-align:center;} /* 本番 .p-contact__wrap の枠（8px #F0F0EF）を再現 */ .cta-block__lead{font-size:2.4rem;font-weight:400;line-height:1.7;color:var(--c-text);} /* 24px */ .cta-block__btn{margin-top:24px;} .cta-block__btn a{display:flex;align-items:center;justify-content:center;width:100%;max-width:900px; margin:0 auto;min-height:101px;padding:16px 24px;background:var(--c-primary); color:var(--c-white);font-size:3.6rem;font-weight:700;line-height:1.4; position:relative;overflow:hidden;} /* hoverを本番(.p-contact__button-link)のスイープに合わせる */ .cta-block__btn a::before{content:"";position:absolute;top:0;left:0;width:0;height:100%;z-index:0;background:var(--c-primary-hover);} /* 明teal #66D8D1 */ .cta-block__btn a:hover{opacity:1;} .cta-block__btn a:hover::before{animation:button-animation-bg 1s ease-in-out;} .cta-block__btntext{position:relative;z-index:1;} /* スイープ(::before)より前面に */ .cta-block__btnarrow{flex-shrink:0;margin-left:16px;width:24px;height:24px;color:var(--c-white);position:relative;z-index:1;} /* 本番PC:矢印はラベル右隣（[テキスト＋矢印]を中央寄せ） */ @keyframes button-animation-bg{ 25%{width:100%;left:0;} 75%{width:100%;left:100%;} 100%{width:0;left:100%;} } /* 電話：本番 p-contact__tel 準拠。PC=横並び（テキスト｜番号＋受付時間）、SP=縦積み */ .cta-block__tel{margin-top:30px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:52px;} .cta-block__teltext{font-size:2.4rem;font-weight:700;color:var(--c-text);min-width:0;text-align:left;} /* 本番準拠 bold／左文は改行可（shrink）・折り返しは左揃え */ .cta-block__telbox{display:flex;flex-direction:column;flex-shrink:0;} /* 電話番号エリアは縮めない＝改行させない */ .cta-block__telnum{display:flex;align-items:center;gap:8px;white-space:nowrap;font-family:var(--font-en);font-size:3.2rem;font-weight:400;line-height:1.2;color:var(--c-text);} .main p.cta-block__telnum a{text-decoration:none;} /* 電話番号は文中リンク扱いにせず下線なし（.main p a より高詳細度で打ち消し） */ .cta-block__telicon{flex-shrink:0;width:18px;height:24px;color:var(--c-text);} /* 本番:電話アイコン＝インラインSVG（mask非依存でfile://でも表示） */ .cta-block__time{font-size:1.4rem;line-height:1.5;color:var(--c-text);white-space:nowrap;} .cta-block--full{margin-top:0;} /* フッター上の全幅CTA（2カラム外） */ /* 注: hr/outsourcing/consulting のFVは本番 .c-page-title を使用するため、DS版 .fv のカテゴリ別背景modifierは不要。 */ /* CTA SP上書き（≤960px） */ @media screen and (max-width:960px){ .cta-block{padding:26px 11px;border-width:4px;} /* 本番SP（border 4px / padding 26 11） */ .cta-block__lead{font-size:2.0rem;} .cta-block__btn a{font-size:2.4rem;min-height:72px;} .cta-block__tel{flex-direction:column;gap:8px;} /* SP:縦積み（本番） */ .cta-block__teltext{font-size:1.5rem;text-align:center;} /* SPは中央（本番） */ .cta-block__telnum{font-size:2.2rem;justify-content:center;} .cta-block__telbox{align-items:center;} .cta-block__time{font-size:1.2rem;text-align:center;} } /* ===================================================================== 本番chrome 文字組みの正規化 letter-spacing は --ls-jp=normal で本文・chrome とも本番一致済み。 行高だけ DS body(1.75) と本番body(1.7) で差があるため、chrome配下のみ本番準拠の 1.7 に戻す。 本文 .layout はDS(1.75)のまま。 ===================================================================== */ .l-header, .l-wrap, #section-header, .l-footer, .p-floating-area{ line-height:1.7; } /* ===================================================================== 本番chrome（ホットリンク）の mask アイコン補正 本番CSSは ::after/::before の mask:url(本番SVG)+currentColor でアイコンを描画するが、 localhostプレビューでは cross-origin の mask が CORS で読めず非表示になる。 ローカル自家ホストのSVGに mask-image を差し替える（mask-size/position 等は本番CSSのまま）。 本番組込時も同一表示。これらのセレクタは本番chromeを持つ hr/outsourcing/consulting でのみ一致（他ページ無影響）。 ===================================================================== */ /* 本番chromeのmaskアイコンはインラインSVGに置換（mask は file:// で null オリジン扱いになり非表示のため）。::after/::before を消し、各SVGはcurrentColorで色を継承。 */ .l-header-main__item--other .l-header-main__link::after{display:none;} /* ヘッダ外部リンク↗ → .l-header-blankicon */ .l-header-blankicon{display:inline-block;width:14px;height:14px;margin-left:4px;vertical-align:-2px;color:currentColor;} .c-page-title__link{position:relative;} .c-page-title__link::after{display:none;} /* hero CTA矢印 → .c-pt-arrow */ .c-pt-arrow{display:inline-block;vertical-align:middle;margin-left:12px;width:16px;height:16px;color:#fff;} /* 矢印はラベル右隣（中央寄せ） */ .c-page-title__contact{column-gap:24px;} /* 「お電話で〜」グループと番号グループの間を24px */ .c-page-title__number{align-items:center;} /* インライン電話アイコンを番号と縦中央で揃える（heroズレ解消） */ .c-page-title__number::before{display:none;} /* hero 電話アイコン → .c-pt-telicon */ .c-pt-telicon{flex-shrink:0;width:18px;height:24px;color:inherit;} /* 色は .c-page-title__number のtealを継承 */ @media screen and (max-width:960px){ .c-pt-telicon{width:14px;height:18px;} } /* 本番SPサイズ */ /* フッター上部の余白（本番 .l-footer__top の padding-top:80px）を削除＝CTA下マージン96のみに */ .l-footer__top{padding-top:0;} /* ===================================================================== hero（本番 .c-page-title）調整 — hr/outsourcing/consulting 専用（.newmain 配下） ・見出しは本番準拠の太さ700（。DSのh1リセットでinherit→細い、を上書き） ・縦マージン: hero下=96px / メイン下(→CTA)=96px / フッタ上CTA下=96px（PC/SP共通） ・PC: 白枠をカラム内1/2幅で3ページ統一・通常フロー化・section高さ成り行き＋内側40px・ボタン白枠フル幅 ・SP: 白枠は本番どおり（左右外の余白＝本番 inner padding を温存） ===================================================================== */ .newmain .c-page-title__text{font-weight:700;} /* hero見出しを本番準拠の太さに */ /* 縦マージン 96px（PC/SP共通） */ .newmain .c-page-title{margin-bottom:96px;} /* hero下=96 */ .newmain .layout{padding-top:0;padding-bottom:0;} #main.newmain{margin-bottom:96px;} /* CTA下=96（本番 #main mb125 を上書き） */ .newmain .cta-block--full{margin-top:96px;} /* メイン下(→CTA)=96 */ @media screen and (min-width:961px){ .newmain .c-page-title{height:auto;min-height:0;padding:40px 0;} /* PC: 高さ成り行き＋内側40px */ .newmain .c-page-title__inner{height:auto;} .newmain .c-page-title__box{position:static;top:auto;left:auto;translate:none;margin:0;width:50%;max-width:none;} /* PC: カラム内1/2・3ページ統一 */ .newmain .c-page-title__contact{max-width:none;} /* PC: CTAボタンを白枠フル幅に */ } @media screen and (max-width:960px){ .newmain .layout{padding-left:20px;padding-right:20px;} /* SPメインコンテンツの左右padding=20px */ .newmain .c-page-title__box{max-width:none;} /* consulting固有のmax-width524を解除し、SPはinner幅いっぱい（左右の余白は温存）に3ページ統一 */ } /* 768〜960：本番heroのPCルール（min-width:768＝絶対box・max-width475/524）が効く“谷間”。 通常フロー＋inner幅いっぱいに統一し、3ページの挙動を揃える（絶対配置由来のはみ出しも解消）。 */ @media screen and (min-width:768px) and (max-width:960px){ .newmain .c-page-title{height:auto;min-height:0;padding:40px 0;} .newmain .c-page-title__inner{height:auto;} .newmain .c-page-title__box{position:static;top:auto;left:auto;translate:none;margin:0;width:100%;max-width:none;} .newmain .c-page-title__contact{max-width:none;} } /* ===================================================================== 右下固定CTA（お問い合わせ floating バナー） 本番 business top（service_business_new.css＋floating.css）の最終見た目を実測値で再現。 ※ 本番のバナー装飾は service_business_new.css にあるが、同CSSは html/a/img/p-breadcrumbs 等の 汎用ルールを含み丸ごと読むと本ページのchrome/本文を壊すため、ホットリンクせず装飾のみ自己完結で再現。 配置は固定、表示は is-visible トグル（現行JSがスクロールで付与）。色はDSトークン経由。 セレクタは本番chromeを持つ hr/outsourcing/consulting でのみ一致（他ページ無影響）。 ===================================================================== */ .p-floating-area{position:fixed;right:0;bottom:80px;z-index:9000;} .p-floating-pc{display:block;} .p-floating-banner{width:385px; opacity:0;visibility:hidden;transform:translateY(16px); transition:opacity .3s ease,transform .3s ease,visibility .3s ease;} .p-floating-banner.is-visible{opacity:1;visibility:visible;transform:none;} /* スクロールで出現 */ .p-floating-banner-1{position:relative;width:340px;margin:0 45px 15px 0; /* 本番: 右45px・下15px（385帯に左寄せ） */ background:var(--c-white);padding:20px 0;box-shadow:var(--shadow-card);} .p-floating-banner__ttl{margin-bottom:12px;font-size:2.0rem;font-weight:700;line-height:1.45; text-align:center;color:var(--c-text);} .p-floating-banner__inner{display:block;} .p-floating-banner__item--web{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;text-decoration:none; width:300px;height:80px;margin:0 auto;background:var(--c-primary);} /* 本番: 300×80・左右20pxで中央 */ .p-floating-banner__item--web .p-floating-banner__title{position:relative;z-index:1;font-size:2.0rem;font-weight:700;color:var(--c-white);} .p-floating-arrow{position:relative;z-index:1;flex-shrink:0;margin-left:8px;width:16px;height:16px;color:var(--c-white);} /* 本番:矢印はラベル右隣（[テキスト＋矢印]を中央寄せ） */ /* hoverを他CTAと同じ本番スイープに（.p-floating-banner--secondary 準拠） */ .p-floating-banner__item--web::before{content:"";position:absolute;top:0;left:0;width:0;height:100%;z-index:0;background:var(--c-primary-hover);} .p-floating-banner__item--web:hover{opacity:1;} .p-floating-banner__item--web:hover::before{animation:button-animation-bg 1s ease-in-out;} .p-floating-banner__item--tel{display:block;text-align:center;width:340px;margin-top:13px;text-decoration:none;} /* 本番: block中央 */ .p-floating-banner__item--tel .p-floating-banner__title{font-size:1.4rem;font-weight:700;color:var(--c-text);} .p-floating-banner__tel{font-family:var(--font-en);font-size:3.5rem;font-weight:400;line-height:1; color:var(--c-text);letter-spacing:normal;} /* 本番: letter-spacing normal・nowrapなし（はみ出し回避） */ /* 閉じる（濃灰の丸＋×）。本番: 右上角に中心を合わせる（right:0＋translate(50%,-50%)） */ .p-floating-banner__close{position:absolute;top:0;right:0;width:25px;height:25px; background:var(--c-text);border-radius:50%;cursor:pointer;transform:translate(50%,-50%);} .p-floating-banner__close::before,.p-floating-banner__close::after{content:"";position:absolute; top:50%;left:50%;width:12px;height:2px;background:var(--c-white);} .p-floating-banner__close::before{transform:translate(-50%,-50%) rotate(45deg);} .p-floating-banner__close::after{transform:translate(-50%,-50%) rotate(-45deg);} /* 右下固定CTAはSPでは非表示（本番準拠） */ @media screen and (max-width:960px){ .p-floating-area{display:none;} } /* ===================================================================== カテゴリページ 2カラム化（左=アンカーナビ／右=本文）＋お悩み縦並び 2カラムは既存 .layout__inner（grid: --sidemenu 1fr）を流用。≤960で単カラム化も既存ルール準拠。 ===================================================================== */ .cardgrid--1{grid-template-columns:1fr;} /* お悩みカードを縦並び */ /* アンカーナビ（左・sticky）。ページ内セクションへジャンプ */ .anchornav{position:sticky;top:80px;align-self:start;display:flex;flex-direction:column;gap:24px;} /* 固定ヘッダ実高58px＋余白＝アンカー着地と統一 */ .anchornav__list{border-top:1px solid var(--c-border);} /* 見出し「このページの目次」は削除 */ .anchornav__item{border-bottom:1px solid var(--c-border);} /* 罫線はアイテム単位＝開いたサブも上下罫線の内側に収める */ .anchornav__item > a{display:flex;align-items:center;justify-content:space-between;gap:8px; padding:12px 0;font-size:1.4rem;line-height:1.5;color:var(--c-text);} /* アイコン：スクロール項目（サブ無し親＋サブ項目）＝下向き矢じり ↓ */ .anchornav__item > a::after, .anchornav__subitem > a::after{content:"";width:7px;height:7px;flex-shrink:0;margin:0 2px 4px 0; border-right:1.5px solid var(--c-text-sub);border-bottom:1.5px solid var(--c-text-sub);transform:rotate(45deg);} /* ↓ ページ内ジャンプ */ .anchornav__item > a:hover{opacity:.6;} /* アコーディオン親（サブ有り）＝ ＋/−（閉＝＋ / 開＝−）。スクロールせず開閉するので矢印ではなく加減記号 */ .anchornav__item:has(.anchornav__sublist) > a::after{width:11px;height:11px;margin:0;border:0;transform:none; background:linear-gradient(var(--c-text-sub),var(--c-text-sub)) center/100% 1.5px no-repeat, linear-gradient(var(--c-text-sub),var(--c-text-sub)) center/1.5px 100% no-repeat;} /* ＋ */ .anchornav__item:has(.anchornav__sublist).is-open > a::after{background:linear-gradient(var(--c-text-sub),var(--c-text-sub)) center/100% 1.5px no-repeat;} /* − */ /* サブ項目（#21・PC限定・アコーディオンで開閉／インデント無し）：セクション内h3へジャンプ */ .anchornav__sublist{display:none;margin-bottom:16px;} /* 既定は閉／開いたとき最下部に16px空け */ .anchornav__item.is-open .anchornav__sublist{display:block;} /* 親クリックで開 */ .anchornav__subitem > a{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 0; font-size:1.2rem;line-height:1.5;color:var(--c-text);} /* 下矢印を右端へ */ .anchornav__subitem > a:hover{opacity:.6;} @media screen and (max-width:960px){ /* SP：横並び・横スクロール・固定ヘッダ下(64px)で追従・上に64pxの空き */ .anchornav{position:sticky;top:64px;z-index:20;flex-direction:row;gap:0;min-width:0; margin-top:-32px; /* FVの margin-bottom:96px と相殺し、FV〜アンカーの空きを64pxに（96-32=64） */ background:var(--c-white);border-bottom:1px solid var(--c-border);} /* 固定ヘッダ実高64px直下にバー化。min-width:0=gridトラックのmin-content膨張を抑え内部横スクロールに収める */ .anchornav__list{display:flex;flex-wrap:nowrap;overflow-x:auto;border-top:0; -ms-overflow-style:none;scrollbar-width:none;} /* はみ出したら横スクロール（バー非表示） */ .anchornav__list::-webkit-scrollbar{display:none;} .anchornav__item{flex-shrink:0;border-bottom:0;} .anchornav__item > a{justify-content:center;gap:0;padding:12px 16px;border-bottom:0;white-space:nowrap;} .anchornav__item > a::after, .anchornav__item:has(.anchornav__sublist) > a::after, .anchornav__item:has(.anchornav__sublist).is-open > a::after{display:none;} /* 縦リスト用アイコン(↓/＋−)は横タブでは全て外す */ .anchornav__sublist, .anchornav__item.is-open .anchornav__sublist{display:none;} /* #21・サブ項目はSP（横バー）では常に非表示＝親のみ（PCの開状態が残っても出さない） */ } /* 2カラムの左右入れ替え（本文=左 / アンカーナビ=右）。anchornav使用ページのみ（modifierでスコープ） */ .layout__inner--navright{grid-template-columns:1fr var(--sidemenu);} .layout__inner--navright .anchornav{order:1;} /* nav を右へ（main は既定order 0で左） */ @media screen and (max-width:960px){ .layout__inner--navright{grid-template-columns:1fr;} /* SPは単カラム */ .layout__inner--navright .anchornav{order:0;} /* SPはnavを本文上に（従来どおり） */ }