Spaces:

Johnny0619
/

OU

Running

App Files Files Community

Johnny0619 commited on Nov 26, 2025

Commit

8ab5e32

verified ·

1 Parent(s): 9624452

Create bussiness_portal.html

Browse files

Files changed (1) hide show

bussiness_portal.html +676 -0

bussiness_portal.html ADDED Viewed

	@@ -0,0 +1,676 @@

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>LEOC 業務ポータルサイト | ONODERA PARK</title>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+<style>
+  /* --- ベーススタイル --- */
+  :root {
+    /* テーマカラー（緑） */
+    --theme-green: #29a745;
+    /* テーマカラーの薄い版（ホバー用） */
+    --theme-green-light: #f0f9f2;
+    /* フッター背景色（青） */
+    --footer-bg: #305590;
+    /* テキストカラー */
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    /* 背景色 */
+    --bg-color: #ffffff;
+    /* ボーダー */
+    --border-color: #dcdcdc;
+  }
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-color);
+    font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
+    color: var(--text-primary);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+  }
+  h1, h2, h3 {
+    font-weight: 700;
+  }
+  a { text-decoration: none; color: inherit; transition: all 0.2s ease; }
+  ul { list-style: none; padding: 0; margin: 0; }
+  * { box-sizing: border-box; }
+  /* --- ヘッダー --- */
+  header {
+    background: #ffffff;
+    border-bottom: 4px solid var(--theme-green);
+    padding: 15px 0;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+  }
+  .header-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  /* ロゴエリア */
+  .logo-area {
+    display: flex;
+    flex-direction: column;
+    line-height: 1;
+    margin-right: 20px;
+  }
+  .logo-main {
+    font-size: 32px;
+    font-weight: 900;
+    color: #222;
+    letter-spacing: -0.05em;
+    position: relative;
+    padding-bottom: 5px;
+  }
+  .logo-main::after {
+    content: "";
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background-color: #c5a059;
+    border-radius: 50%;
+    position: absolute;
+    top: 5px;
+    right: 35%;
+  }
+  .logo-sub {
+    font-size: 13px;
+    color: #777;
+    letter-spacing: 0.15em;
+    font-weight: 500;
+    margin-top: 5px;
+  }
+  /* ヘッダー右側 */
+  .header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+  }
+  .nav-links {
+    display: flex;
+    gap: 20px;
+    font-size: 13px;
+    font-weight: bold;
+    color: #333;
+  }
+  .nav-links a:hover {
+    color: var(--theme-green);
+  }
+  /* ヘッダーアクション群 */
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+  .btn-portal {
+    border: 1px solid #333;
+    background-color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+    padding: 4px 8px;
+    white-space: nowrap;
+    transition: background 0.3s;
+  }
+  .btn-portal:hover { background-color: #f0f0f0; }
+  .btn-guide {
+    position: relative;
+    border: 2px solid #222;
+    border-radius: 30px;
+    background: #fff;
+    padding: 5px 12px;
+    color: #222;
+    text-align: center;
+    line-height: 1.1;
+    font-weight: bold;
+    font-size: 11px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: transform 0.2s;
+  }
+  .btn-guide:hover { transform: translateY(-2px); }
+  .btn-guide::before {
+    content: "";
+    position: absolute;
+    bottom: -6px;
+    left: 15px;
+    width: 10px;
+    height: 10px;
+    background: #fff;
+    border-bottom: 2px solid #222;
+    border-right: 2px solid #222;
+    transform: rotate(45deg);
+    clip-path: polygon(0 0, 100% 0, 100% 100%);
+  }
+  .guide-text span {
+    display: block;
+    font-size: 9px;
+    text-align: right;
+    margin-bottom: -2px;
+  }
+  .guide-main { font-size: 12px; }
+  .footprint-icon { font-size: 14px; transform: rotate(-20deg); }
+  .btn-search {
+    width: 40px;
+    height: 40px;
+    border: 2px solid #222;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 18px;
+    color: #222;
+    background: #fff;
+    transition: background 0.3s;
+  }
+  .btn-search:hover { background-color: #f0f0f0; }
+  /* --- メインコンテンツ --- */
+  .container {
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 40px 25px 80px;
+  }
+  /* 記事ヘッダー */
+  .article-header {
+    margin-bottom: 40px;
+    border-bottom: 1px solid #333;
+    padding-bottom: 20px;
+  }
+  .breadcrumbs {
+    font-size: 12px;
+    color: #888;
+    margin-bottom: 15px;
+  }
+  .breadcrumbs span { margin: 0 5px; }
+  .article-title {
+    font-size: 32px;
+    margin: 0 0 15px 0;
+    color: #000;
+    line-height: 1.3;
+  }
+  .article-meta {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+  .meta-left {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+  .post-date { font-weight: bold; font-size: 16px; }
+  .post-tag {
+    display: inline-block;
+    border: 1px solid #333;
+    border-radius: 20px;
+    padding: 4px 12px;
+    font-size: 12px;
+    font-weight: bold;
+    color: #333;
+    background: #fff;
+  }
+  .like-button {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: bold;
+    font-size: 14px;
+    cursor: pointer;
+  }
+  .like-button i { color: #333; font-size: 24px; }
+  /* 導入テキスト */
+  .intro-text {
+    font-size: 15px;
+    color: #333;
+    line-height: 1.8;
+    margin-bottom: 50px;
+  }
+  .highlight-badge {
+    color: var(--theme-green);
+    font-weight: bold;
+  }
+  /* --- リンク集（テーブル風デザイン） --- */
+  .portal-group {
+    margin-bottom: 50px;
+  }
+  .group-title {
+    font-size: 20px;
+    color: #333;
+    /* 見出しの下線は削除して、テーブルとの一体感を高めるのもありですが、
+       ここでは区切りのために残します */
+    border-bottom: 2px solid var(--theme-green);
+    padding-bottom: 10px;
+    margin-bottom: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .group-title span.en {
+    font-size: 12px;
+    color: #999;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: normal;
+  }
+  /* テーブル風コンテナ */
+  .link-list {
+    border: 1px solid var(--border-color); /* 全体を囲む枠線 */
+    border-radius: 8px; /* 角丸 */
+    background-color: #fff;
+    overflow: hidden; /* 子要素が角丸からはみ出ないように */
+  }
+  /* 各行（アイテム） */
+  .link-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 18px 25px;
+    border-bottom: 1px solid #eee; /* 行間の区切り線 */
+    /* 左端の緑ライン（通常時は透明にして幅だけ確保） */
+    border-left: 5px solid transparent;
+    transition: all 0.2s ease;
+    background-color: #fff;
+  }
+  /* 最後の行だけ下線を消す */
+  .link-item:last-child {
+    border-bottom: none;
+  }
+  /* ホバー時の挙動 */
+  .link-item:hover {
+    background-color: var(--theme-green-light); /* 背景を薄い緑に */
+    border-left-color: var(--theme-green); /* 左端に緑ライン出現 */
+    /* 以前のようなtransform（位置移動）はなくし、フラットなテーブル感を維持 */
+  }
+  .link-content {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+  .link-icon {
+    width: 24px;
+    text-align: center;
+    color: #aaa;
+    font-size: 1.2em;
+    transition: color 0.3s;
+  }
+  .link-item:hover .link-icon { color: var(--theme-green); }
+  .link-text {
+    font-weight: bold;
+    color: #333;
+    font-size: 15px;
+  }
+  .badge-pc {
+    display: inline-block;
+    background-color: var(--theme-green);
+    color: #fff;
+    font-size: 10px;
+    padding: 3px 8px;
+    border-radius: 4px;
+    margin-left: 10px;
+    font-weight: normal;
+    vertical-align: middle;
+  }
+  .arrow-icon { color: #ddd; font-size: 0.9em; transition: color 0.2s; }
+  .link-item:hover .arrow-icon { color: var(--theme-green); }
+  /* --- お問い合わせエリア --- */
+  .contact-section {
+    background-color: #f5f5f5;
+    padding: 40px 20px;
+    text-align: center;
+    margin-top: 60px;
+    border-radius: 8px; /* ここも少し角丸に */
+  }
+  .contact-label {
+    font-weight: bold;
+    margin-bottom: 20px;
+    font-size: 16px;
+    color: #333;
+  }
+  .contact-btn {
+    display: inline-block;
+    background-color: #2b2b2b;
+    color: #fff !important;
+    padding: 15px 40px;
+    border-radius: 50px;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 15px;
+    margin-bottom: 30px;
+    transition: opacity 0.3s;
+  }
+  .contact-btn:hover { opacity: 0.8; }
+  .contact-btn span { font-weight: normal; margin-left: 10px; }
+  .contact-note {
+    font-size: 11px;
+    color: #666;
+    line-height: 1.8;
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
+  }
+  /* --- フッター --- */
+  footer {
+    background-color: var(--footer-bg);
+    color: #fff;
+    padding: 40px 0;
+    font-size: 12px;
+  }
+  .footer-inner {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 25px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 20px;
+  }
+  .footer-left h2 {
+    margin: 0;
+    font-size: 24px;
+    line-height: 1;
+    font-weight: bold;
+    letter-spacing: 0.05em;
+  }
+  .footer-left span {
+    display: block;
+    font-size: 10px;
+    margin-top: 5px;
+    letter-spacing: 0.1em;
+    font-weight: normal;
+  }
+  .footer-center {
+    text-align: right;
+    flex-grow: 1;
+    margin-right: 40px;
+  }
+  .footer-links { margin-bottom: 15px; }
+  .footer-links a {
+    color: #fff;
+    margin-left: 20px;
+    font-weight: bold;
+    opacity: 0.9;
+  }
+  .footer-links a:hover { opacity: 1; text-decoration: underline; }
+  .copyright { opacity: 0.8; }
+  .footer-right {
+    text-align: center;
+    border-left: 1px solid rgba(255,255,255,0.3);
+    padding-left: 20px;
+  }
+  .group-logo-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    line-height: 1.2;
+  }
+  .globe-icon { font-size: 24px; margin-bottom: 5px; }
+  .group-text { font-size: 14px; font-weight: bold; letter-spacing: 0.1em; }
+  .group-sub { font-size: 10px; letter-spacing: 0.2em; }
+  /* レスポンシブ対応 */
+  @media (max-width: 1024px) {
+    .header-inner { flex-direction: column; gap: 15px; }
+    .header-right { justify-content: center; }
+    .nav-links { flex-wrap: wrap; justify-content: center; }
+  }
+  @media (max-width: 768px) {
+    .footer-inner { flex-direction: column; text-align: center; }
+    .footer-center { margin-right: 0; }
+    .footer-right { border-left: none; padding-left: 0; margin-top: 20px; }
+    .article-meta { flex-direction: column; align-items: flex-start; }
+    .meta-right { align-self: flex-end; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="header-inner">
+    <div class="logo-area">
+      <div class="logo-main">オノパー</div>
+      <div class="logo-sub">ONODERA PARK</div>
+    </div>
+    <div class="header-right">
+      <nav class="nav-links">
+        <a href="#">グループを知る</a>
+        <a href="#">仲間の想いを知る</a>
+        <a href="#">ショート動画</a>
+        <a href="#">みんなの広場</a>
+        <a href="#">NEWS & TOPICS</a>
+        <a href="#">おにぎりアクション</a>
+      </nav>
+      <div class="header-actions">
+        <a href="#" class="btn-portal">業務ポータル集</a>
+        <a href="#" class="btn-guide">
+          <div class="guide-text">
+            <span>オノパーの</span>
+            <span class="guide-main">歩き方</span>
+          </div>
+          <i class="fa-solid fa-shoe-prints footprint-icon"></i>
+        </a>
+        <a href="#" class="btn-search">
+          <i class="fa-solid fa-magnifying-glass"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+</header>
+<main class="container">
+  <div class="article-header">
+    <div class="breadcrumbs">TOP <span>&gt;</span> 新着記事 <span>&gt;</span> [LEOC] 業務ポータル</div>
+    <h1 class="article-title">[LEOC] 業務ポータル</h1>
+    <div class="article-meta">
+      <div class="meta-left">
+        <span class="post-date">2024.11.19</span>
+        <span class="post-tag">#お役立ち</span>
+      </div>
+      <div class="meta-right">
+        <div class="like-button">
+          <i class="fa-solid fa-circle-heart" style="color:#222;"></i>
+          <span>86いいね</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="intro-text">
+    <p>LEOCの社内マニュアルやシステム・申請等のリンクを掲載しております。<br>
+    会社アカウント・事業所PCからのアクセス可能なサイトは <span class="highlight-badge">★マーク</span> をつけております。<br>
+    掲載情報は全て社内限りの情報となります。マニュアルの内容につきましては、各管轄部署へ問い合わせください。<br>
+    掲載内容にご意見ございましたら、ぜひインナーコミュニケーション部までご連絡ください。</p>
+  </div>
+  <section class="portal-group">
+    <h2 class="group-title">
+      基幹システム・勤怠・入館
+      <span class="en">Core Systems</span>
+    </h2>
+    <div class="link-list">
+      <a href="https://sv.wb-basic.jp/smile/index.do" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-stamp link-icon"></i>
+          <span class="link-text">スマイル（稟議・諸申請等システム）</span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://otecenter.morereception.jp/admin/leoc/common/login/action/login" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-id-card link-icon"></i>
+          <span class="link-text">入館受付システム 「more reception」</span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://sites.google.com/leoc.jp/risk-management/" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-shield-halved link-icon"></i>
+          <span class="link-text">リスク関連サイト <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+    </div>
+  </section>
+  <section class="portal-group">
+    <h2 class="group-title">
+      給与・人事・申請
+      <span class="en">HR & Application</span>
+    </h2>
+    <div class="link-list">
+      <a href="https://kyuyo5.keitai-bin.jp/leoc/servlet/RC" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-file-invoice-dollar link-icon"></i>
+          <span class="link-text">給与明細システム P-web</span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://onodera.form.kintoneapp.com/public/syohenkou" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-pen-to-square link-icon"></i>
+          <span class="link-text">諸変更届 (Kintone)</span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://sites.google.com/leoc.jp/tec-jigyosyo/home" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-desktop link-icon"></i>
+          <span class="link-text">システムサポート <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://sites.google.com/leoc.co.jp/leonavi/%E7%94%A3%E4%BC%91%E8%82%B2%E4%BC%91" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-user-plus link-icon"></i>
+          <span class="link-text">採用ナビ <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+    </div>
+  </section>
+  <section class="portal-group">
+    <h2 class="group-title">
+      業務マニュアル・研修
+      <span class="en">Manual & Training</span>
+    </h2>
+    <div class="link-list">
+      <a href="http://sys.leoc-j.com/link.php?k=He38SLTR" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-book link-icon"></i>
+          <span class="link-text">LEOC事業所向けマニュアル <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://sites.google.com/onodera-group.com/menulab/top?authuser=0" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-utensils link-icon"></i>
+          <span class="link-text">統一レシピ <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://sites.google.com/leoc.co.jp/leockitchen-recipe/" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-brands fa-youtube link-icon"></i>
+          <span class="link-text">LEOC KITCHEN（調理動画） <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://sites.google.com/leoc.jp/leoccafe/" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-mug-hot link-icon"></i>
+          <span class="link-text">LEOC Cafe (選択型研修) <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+      <a href="https://sites.google.com/leoc.jp/hospitalitysite/%E3%83%9B%E3%83%BC%E3%83%A0" class="link-item" target="_blank">
+        <div class="link-content">
+          <i class="fa-solid fa-heart link-icon"></i>
+          <span class="link-text">ホスピタリティサイト <span class="badge-pc">★</span></span>
+        </div>
+        <i class="fa-solid fa-chevron-right arrow-icon"></i>
+      </a>
+    </div>
+  </section>
+</main>
+<div class="contact-section">
+  <p class="contact-label">オノパーに関するお問い合わせはこちら</p>
+  <a href="mailto:kouhou@leoc.co.jp" class="contact-btn">
+    「インナーコミュニケーション部」 <span>kouhou@leoc.co.jp</span>
+  </a>
+  <p class="contact-note">
+    当サイトに掲載されている記事、写真、イラスト、動画等の著作物に関する権利は、ONODERA GROUPまたは<br>
+    その情報提供者に帰属します。ONODERA GROUP以外の方へのコピー配布や、ホームページ、ブログ、SNSなどへの無断転載は禁止となります。
+  </p>
+</div>
+<footer>
+  <div class="footer-inner">
+    <div class="footer-left">
+      <h2>オノパー</h2>
+      <span>ONODERA PARK</span>
+    </div>
+    <div class="footer-center">
+      <div class="footer-links">
+        <a href="#">運用ガイドライン</a>
+        <a href="#">ログアウト</a>
+      </div>
+      <div class="copyright">
+        Copyright© ONODERA GROUP Corporate Communications Division All Rights Reserved.
+      </div>
+    </div>
+    <div class="footer-right">
+      <div class="group-logo-placeholder">
+        <i class="fa-solid fa-globe globe-icon"></i>
+        <div class="group-text">ONODERA</div>
+        <div class="group-sub">GROUP</div>
+      </div>
+    </div>
+  </div>
+</footer>
+</body>
+</html>