HPテーマ案（最大5） · 契約順：18

HWYS株式会社

← 顧客運営情報へ戻る別カテゴリーへ移るときはここから選び直してください

契約順：18公開ID：10634188856563

工程: deployed · 思想: none · 公開: はい · HTML入り案: 5 / 5 · 顧客選択: A

案 A ラベル（顧客向け短い名前） HTML（HOME トップの断片または全文）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HWYS株式会社 | 構造ミニマル（HOME案）</title>
<meta name="description" content="大阪のHWYS株式会社。業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。建築士の視点で事業の土台を支え、経営者のリソースを成長に向けます。">
<link rel="canonical" href="https://hwysgroup.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="HWYS株式会社 | 事業を、構造から強くする">
<meta property="og:description" content="業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。構造から事業を支える伴走者。">
<meta property="og:url" content="https://hwysgroup.com/">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{--primary:#2C5282;--secondary:#4A5568;--accent:#3182CE;--bg:#F7FAFC;--surface:#fff;--text:#1A202C;--muted:#718096;--radius:6px;--max:1120px;--gap:clamp(3.5rem,7vw,5rem);--px:clamp(1.25rem,4vw,2rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.75;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:9999}
.skip:focus{left:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #E2E8F0}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem;position:relative}
.logo{font-weight:700;font-size:1.125rem;color:var(--primary);letter-spacing:.02em}
.logo span{display:block;font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:.08em}
.nav-toggle{display:none;background:none;border:1px solid #CBD5E0;border-radius:var(--radius);padding:.4rem .65rem;font:inherit;cursor:pointer;min-height:44px}
nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;margin:0;padding:0}
nav a{color:var(--secondary);font-size:.85rem;font-weight:500;padding:.35rem 0;min-height:44px;display:inline-flex;align-items:center}
nav a:hover{color:var(--primary);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.35rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:background .2s,transform .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2B6CB0;text-decoration:none;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-secondary:hover{background:rgba(44,82,130,.06);text-decoration:none}
.home-surface{padding:var(--gap) 0}
.home-surface:nth-of-type(even){background:var(--surface)}
.site-page{padding:var(--gap) 0;border-top:1px solid #E2E8F0}
.site-page:nth-of-type(even){background:var(--surface)}
.site-page--placeholder{padding:2rem 0;background:#EDF2F7;border-top:1px dashed #CBD5E0}
.site-page--placeholder p{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem}
h1,h2,h3{line-height:1.35;margin:0 0 1rem;color:var(--primary)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,3vw,1.75rem)}
h3{font-size:1.1rem;color:var(--secondary)}
.lead{font-size:1.05rem;color:var(--secondary);max-width:42em}
.hero{background:var(--bg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(44,82,130,.07) 1px,transparent 0);background-size:24px 24px;pointer-events:none;opacity:.5}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;position:relative}
@media(min-width:768px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-visual{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid #E2E8F0;background:linear-gradient(135deg,#EDF2F7 0%,#fff 50%,#EBF8FF 100%);position:relative;overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:12%;border:1px solid rgba(44,82,130,.15);border-radius:2px}
.hero-visual::after{content:"";position:absolute;left:12%;right:12%;top:35%;height:1px;background:rgba(44,82,130,.12)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tag{font-size:.8rem;padding:.25rem .65rem;border-radius:999px;background:#EDF2F7;color:var(--secondary);border:1px solid #E2E8F0}
.card-grid{display:grid;gap:1.25rem}
@media(min-width:640px){.card-grid.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{display:block;background:var(--surface);border:1px solid #E2E8F0;border-radius:var(--radius);padding:1.35rem 1.25rem;transition:box-shadow .2s,border-color .2s;color:inherit}
.card:hover{box-shadow:0 4px 20px rgba(26,32,44,.06);border-color:#CBD5E0;text-decoration:none}
.card p{margin:.5rem 0 0;font-size:.925rem;color:var(--muted)}
.card .more{font-size:.8rem;color:var(--accent);font-weight:700;margin-top:.75rem;display:inline-block}
.strength-list{display:grid;gap:1rem}
@media(min-width:768px){.strength-list{grid-template-columns:repeat(3,1fr)}}
.strength-item{padding:1.25rem;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.message-box{max-width:52em}
.message-box p{margin:0 0 1rem}
.trust-quote{border-left:3px solid var(--accent);padding:1rem 1.25rem;background:#EDF2F7;border-radius:0 var(--radius) var(--radius) 0;margin:0;font-size:.95rem;color:var(--secondary)}
.cta-band{text-align:center;background:linear-gradient(180deg,#EDF2F7,#F7FAFC);border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;padding:var(--gap) 0}
.cta-band p{color:var(--secondary);max-width:36em;margin:0 auto 1.25rem}
.contact-form{max-width:36em;margin:0 auto}
.form-row{margin-bottom:1rem}
.form-row label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.65rem .75rem;border:1px solid #CBD5E0;border-radius:var(--radius);font:inherit;background:#fff;min-height:44px}
.form-row textarea{min-height:140px;resize:vertical}
.req{color:#C53030;font-size:.8rem;margin-left:.25rem}
.form-note{font-size:.85rem;color:var(--muted);margin-bottom:1.25rem;padding:1rem;background:#EDF2F7;border-radius:var(--radius);border-left:3px solid var(--accent)}
.after-note{font-size:.875rem;color:var(--muted);margin-top:1.25rem;padding:1rem;border:1px solid #E2E8F0;border-radius:var(--radius)}
.site-footer{background:var(--primary);color:#E2E8F0;padding:2.5rem 0 2rem;font-size:.875rem}
.site-footer a{color:#BEE3F8}
.footer-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr}}
.footer-meta{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem;color:#A0AEC0}
.layout-b .service-teaser-first{order:-1}
.layout-c .trust-expanded{max-width:48em}
.layout-d .card-grid.cols-4 .card{text-align:center}
.layout-e .hero-band{background:linear-gradient(180deg,rgba(49,130,206,.08),transparent);margin:0 calc(-1 * var(--px));padding-left:var(--px);padding-right:var(--px)}
@media(max-width:767px){
.nav-toggle{display:block}
nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #E2E8F0;display:none;padding:1rem var(--px);max-height:70vh;overflow-y:auto}
nav.open{display:block}
nav ul{flex-direction:column;gap:.25rem}
}
</style>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Organization","name":"HWYS株式会社","url":"https://hwysgroup.com/","email":"haruki_kimura@hwysgroup.com","description":"業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発"}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","name":"HWYS株式会社","url":"https://hwysgroup.com/"}
</script>
</head>
<body>
<a class="skip" href="#main">本文へスキップ</a><header class="site-header">
<div class="container header-inner">
<a class="logo" href="#top">HWYS株式会社<span>Honest with yourself</span></a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" id="nav-btn">メニュー</button>
<nav id="site-nav" aria-label="メインナビゲーション">
<ul>
<li><a href="#top">HOME</a></li><li><a href="#page-concept">理念</a></li><li><a href="#page-message">代表挨拶</a></li><li><a href="#page-service-bpo">BPO</a></li><li><a href="#page-service-web">Web制作</a></li><li><a href="#page-service-ec">EC運営</a></li><li><a href="#page-service-rd">研究開発</a></li><li><a href="#page-strength">強み</a></li><li><a href="#page-company">会社概要</a></li><li><a href="#page-contact">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header><main id="main"><section class="hero home-surface" id="top">
<div class="container hero-grid">
<div>
<p class="section-label">Structure First</p>
<h1>事業を、構造から強くする</h1>
<p class="lead">HWYS株式会社は、業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発を通じ、経営者の貴重なリソースを「成長」へ向け直す伴走者です。</p>
<div class="tag-row">
<span class="tag">業務請負 BPO</span>
<span class="tag">完全オリジナルWeb</span>
<span class="tag">EC運営</span>
<span class="tag">研究開発</span>
</div>
<div class="hero-actions">
<a class="btn btn-primary" href="#page-contact">事業のご相談</a>
<a class="btn btn-secondary" href="#page-service-bpo">事業内容を見る</a>
</div>
</div>
<div class="hero-visual" role="img" aria-label="構造と土台を示す抽象グリッド"></div>
</div>
</section>

<section class="home-surface" id="home-positioning">
<div class="container">
<p class="section-label">Positioning</p>
<h2>装飾より、目に見えない「構造」と土台</h2>
<p class="lead">特定の手法を売るのではなく、お客様の事業を構造から強くするパートナーとして、BPO・Web・EC・研究開発を一貫した哲学でつなぎます。</p>
<a class="btn btn-secondary" href="#page-concept">理念を詳しく見る</a>
</div>
</section>

<section class="home-surface" id="home-services">
<div class="container">
<p class="section-label">Services</p>
<h2>事業概要</h2>
<div class="card-grid cols-2 cols-4">
<a class="card" href="#page-service-bpo"><h3>業務請負（BPO）</h3><p>リソースをコア業務へ。人手不足・繁忙期に伴走。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-web"><h3>ホームページ制作事業(コーポレートサイト専門)</h3><p>思想翻訳に基づく完全オリジナル静的サイト。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-ec"><h3>ECサイト運営(国内・越境)</h3><p>国内・越境EC。物販・卸・仕入れ代行。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-rd"><h3>研究/開発</h3><p>新商品開発と提携・商談会の場づくり。</p><span class="more">詳しく見る →</span></a>
</div>
</div>
</section>

<section class="home-surface" id="home-trust">
<div class="container">
<p class="section-label">Trust</p>
<h2>行動で示す誠実さ</h2>
<blockquote class="trust-quote">言葉より、行動と事実で信頼を積み上げます。営業目的のお問い合わせはお断りしています。</blockquote>
</div>
</section>

<section class="cta-band home-surface" id="home-cta">
<div class="container">
<h2>事業に関するご相談</h2>
<p>まずはお気軽にご連絡ください。詳細は各事業ページ、フォームはお問い合わせページにございます。</p>
<a class="btn btn-primary" href="#page-contact">お問い合わせへ</a>
</div>
</section><section id="page-concept" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-concept」— 全ページ展開（段3）で表示</p></div></section><section id="page-message" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-message」— 全ページ展開（段3）で表示</p></div></section><section id="page-service-bpo" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-service-bpo」— 全ページ展開（段3）で表示</p></div></section><section id="page-service-web" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-service-web」— 全ページ展開（段3）で表示</p></div></section><section id="page-service-ec" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-service-ec」— 全ページ展開（段3）で表示</p></div></section><section id="page-service-rd" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-service-rd」— 全ページ展開（段3）で表示</p></div></section><section id="page-strength" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-strength」— 全ページ展開（段3）で表示</p></div></section><section id="page-company" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-company」— 全ページ展開（段3）で表示</p></div></section><section id="page-contact" class="site-page site-page--placeholder" aria-hidden="true"><div class="container"><p>「page-contact」— 全ページ展開（段3）で表示</p></div></section></main><footer class="site-footer">
<div class="container footer-grid">
<div>
<strong>HWYS株式会社</strong>
<p>〒530-0001 大阪府大阪市北区梅田1丁目2番2号 大阪駅前第2ビル12階 12号室（2024年10月1日 本社移転）</p>
</div>
<div><p><a href="https://www.instagram.com/hwysgroup/" rel="noopener noreferrer">www.instagram.com</a></p><p><a href="https://x.com/HWYSgroup" rel="noopener noreferrer">x.com</a></p><p><a href="https://www.threads.com/@hwysgroup" rel="noopener noreferrer">www.threads.com</a></p></div>
</div>
<div class="container footer-meta">&copy; HWYS株式会社</div>
</footer><script>
(function(){
var btn=document.getElementById('nav-btn');
var nav=document.getElementById('site-nav');
if(!btn||!nav)return;
btn.addEventListener('click',function(){
var open=nav.classList.toggle('open');
btn.setAttribute('aria-expanded',open?'true':'false');
});
})();
</script></body></html>

運営メモ（顧客非表示）

案 B ラベル（顧客向け短い名前） HTML（HOME トップの断片または全文）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HWYS株式会社 | 実務先出し（HOME案）</title>
<meta name="description" content="大阪のHWYS株式会社。業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。建築士の視点で事業の土台を支え、経営者のリソースを成長に向けます。">
<link rel="canonical" href="https://hwysgroup.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="HWYS株式会社 | 事業を、構造から強くする">
<meta property="og:description" content="業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。構造から事業を支える伴走者。">
<meta property="og:url" content="https://hwysgroup.com/">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{--primary:#2C5282;--secondary:#4A5568;--accent:#3182CE;--bg:#F7FAFC;--surface:#fff;--text:#1A202C;--muted:#718096;--radius:6px;--max:1120px;--gap:clamp(3.5rem,7vw,5rem);--px:clamp(1.25rem,4vw,2rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.75;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:9999}
.skip:focus{left:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #E2E8F0}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem;position:relative}
.logo{font-weight:700;font-size:1.125rem;color:var(--primary);letter-spacing:.02em}
.logo span{display:block;font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:.08em}
.nav-toggle{display:none;background:none;border:1px solid #CBD5E0;border-radius:var(--radius);padding:.4rem .65rem;font:inherit;cursor:pointer;min-height:44px}
nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;margin:0;padding:0}
nav a{color:var(--secondary);font-size:.85rem;font-weight:500;padding:.35rem 0;min-height:44px;display:inline-flex;align-items:center}
nav a:hover{color:var(--primary);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.35rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:background .2s,transform .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2B6CB0;text-decoration:none;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-secondary:hover{background:rgba(44,82,130,.06);text-decoration:none}
.home-surface{padding:var(--gap) 0}
.home-surface:nth-of-type(even){background:var(--surface)}
.site-page{padding:var(--gap) 0;border-top:1px solid #E2E8F0}
.site-page:nth-of-type(even){background:var(--surface)}
.site-page--placeholder{padding:2rem 0;background:#EDF2F7;border-top:1px dashed #CBD5E0}
.site-page--placeholder p{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem}
h1,h2,h3{line-height:1.35;margin:0 0 1rem;color:var(--primary)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,3vw,1.75rem)}
h3{font-size:1.1rem;color:var(--secondary)}
.lead{font-size:1.05rem;color:var(--secondary);max-width:42em}
.hero{background:var(--bg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(44,82,130,.07) 1px,transparent 0);background-size:24px 24px;pointer-events:none;opacity:.5}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;position:relative}
@media(min-width:768px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-visual{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid #E2E8F0;background:linear-gradient(135deg,#EDF2F7 0%,#fff 50%,#EBF8FF 100%);position:relative;overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:12%;border:1px solid rgba(44,82,130,.15);border-radius:2px}
.hero-visual::after{content:"";position:absolute;left:12%;right:12%;top:35%;height:1px;background:rgba(44,82,130,.12)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tag{font-size:.8rem;padding:.25rem .65rem;border-radius:999px;background:#EDF2F7;color:var(--secondary);border:1px solid #E2E8F0}
.card-grid{display:grid;gap:1.25rem}
@media(min-width:640px){.card-grid.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{display:block;background:var(--surface);border:1px solid #E2E8F0;border-radius:var(--radius);padding:1.35rem 1.25rem;transition:box-shadow .2s,border-color .2s;color:inherit}
.card:hover{box-shadow:0 4px 20px rgba(26,32,44,.06);border-color:#CBD5E0;text-decoration:none}
.card p{margin:.5rem 0 0;font-size:.925rem;color:var(--muted)}
.card .more{font-size:.8rem;color:var(--accent);font-weight:700;margin-top:.75rem;display:inline-block}
.strength-list{display:grid;gap:1rem}
@media(min-width:768px){.strength-list{grid-template-columns:repeat(3,1fr)}}
.strength-item{padding:1.25rem;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.message-box{max-width:52em}
.message-box p{margin:0 0 1rem}
.trust-quote{border-left:3px solid var(--accent);padding:1rem 1.25rem;background:#EDF2F7;border-radius:0 var(--radius) var(--radius) 0;margin:0;font-size:.95rem;color:var(--secondary)}
.cta-band{text-align:center;background:linear-gradient(180deg,#EDF2F7,#F7FAFC);border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;padding:var(--gap) 0}
.cta-band p{color:var(--secondary);max-width:36em;margin:0 auto 1.25rem}
.contact-form{max-width:36em;margin:0 auto}
.form-row{margin-bottom:1rem}
.form-row label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.65rem .75rem;border:1px solid #CBD5E0;border-radius:var(--radius);font:inherit;background:#fff;min-height:44px}
.form-row textarea{min-height:140px;resize:vertical}
.req{color:#C53030;font-size:.8rem;margin-left:.25rem}
.form-note{font-size:.85rem;color:var(--muted);margin-bottom:1.25rem;padding:1rem;background:#EDF2F7;border-radius:var(--radius);border-left:3px solid var(--accent)}
.after-note{font-size:.875rem;color:var(--muted);margin-top:1.25rem;padding:1rem;border:1px solid #E2E8F0;border-radius:var(--radius)}
.site-footer{background:var(--primary);color:#E2E8F0;padding:2.5rem 0 2rem;font-size:.875rem}
.site-footer a{color:#BEE3F8}
.footer-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr}}
.footer-meta{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem;color:#A0AEC0}
.layout-b .service-teaser-first{order:-1}
.layout-c .trust-expanded{max-width:48em}
.layout-d .card-grid.cols-4 .card{text-align:center}
.layout-e .hero-band{background:linear-gradient(180deg,rgba(49,130,206,.08),transparent);margin:0 calc(-1 * var(--px));padding-left:var(--px);padding-right:var(--px)}
@media(max-width:767px){
.nav-toggle{display:block}
nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #E2E8F0;display:none;padding:1rem var(--px);max-height:70vh;overflow-y:auto}
nav.open{display:block}
nav ul{flex-direction:column;gap:.25rem}
}
</style>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Organization","name":"HWYS株式会社","url":"https://hwysgroup.com/","email":"haruki_kimura@hwysgroup.com","description":"業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発"}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","name":"HWYS株式会社","url":"https://hwysgroup.com/"}
</script>
</head>
<body>
<a class="skip" href="#main">本文へスキップ</a><header class="site-header">
<div class="container header-inner">
<a class="logo" href="#top">HWYS株式会社<span>Honest with yourself</span></a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" id="nav-btn">メニュー</button>
<nav id="site-nav" aria-label="メインナビゲーション">
<ul>
<li><a href="#top">HOME</a></li><li><a href="#page-concept">理念</a></li><li><a href="#page-message">代表挨拶</a></li><li><a href="#page-service-bpo">BPO</a></li><li><a href="#page-service-web">Web制作</a></li><li><a href="#page-service-ec">EC運営</a></li><li><a href="#page-service-rd">研究開発</a></li><li><a href="#page-strength">強み</a></li><li><a href="#page-company">会社概要</a></li><li><a href="#page-contact">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header><main id="main"><section class="hero home-surface layout-b" id="top">
<div class="container hero-grid">
<div>
<p class="section-label">Structure First</p>
<h1>事業を、構造から強くする</h1>
<p class="lead">BPO・物流の現場で培った実行力を軸に、4事業で事業の土台を支えます。</p>
<div class="tag-row">
<span class="tag">業務請負 BPO</span>
<span class="tag">完全オリジナルWeb</span>
<span class="tag">EC運営</span>
<span class="tag">研究開発</span>
</div>
<div class="hero-actions">
<a class="btn btn-primary" href="#page-contact">事業のご相談</a>
<a class="btn btn-secondary" href="#page-service-bpo">事業内容を見る</a>
</div>
</div>
<div class="hero-visual" role="img" aria-label="構造と土台を示す抽象グリッド"></div>
</div>
</section>

<section class="home-surface layout-b" id="home-positioning">
<div class="container">
<p class="section-label">Positioning</p>
<h2>装飾より、目に見えない「構造」と土台</h2>
<p class="lead">特定の手法を売るのではなく、お客様の事業を構造から強くするパートナーとして、BPO・Web・EC・研究開発を一貫した哲学でつなぎます。</p>
<a class="btn btn-secondary" href="#page-concept">理念を詳しく見る</a>
</div>
</section>

<section class="home-surface layout-b" id="home-services">
<div class="container">
<p class="section-label">Services</p>
<h2>事業概要</h2>
<div class="card-grid cols-2 cols-4">
<a class="card" href="#page-service-bpo" style="border-color:var(--accent)"><h3>業務請負（BPO）</h3><p>リソースをコア業務へ。人手不足・繁忙期に伴走。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-web"><h3>ホームページ制作事業(コーポレートサイト専門)</h3><p>思想翻訳に基づく完全オリジナル静的サイト。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-ec"><h3>ECサイト運営(国内・越境)</h3><p>国内・越境EC。物販・卸・仕入れ代行。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-rd"><h3>研究/開発</h3><p>新商品開発と提携・商談会の場づくり。</p><span class="more">詳しく見る →</span></a>
</div>
</div>
</section>

<section class="home-surface layout-b" id="home-trust">
<div class="container">
<p class="section-label">Trust</p>
<h2>行動で示す誠実さ</h2>
<blockquote class="trust-quote">言葉より、行動と事実で信頼を積み上げます。営業目的のお問い合わせはお断りしています。</blockquote>
</div>
</section>

運営メモ（顧客非表示）

案 C ラベル（顧客向け短い名前） HTML（HOME トップの断片または全文）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HWYS株式会社 | ストーリー（HOME案）</title>
<meta name="description" content="大阪のHWYS株式会社。業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。建築士の視点で事業の土台を支え、経営者のリソースを成長に向けます。">
<link rel="canonical" href="https://hwysgroup.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="HWYS株式会社 | 事業を、構造から強くする">
<meta property="og:description" content="業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。構造から事業を支える伴走者。">
<meta property="og:url" content="https://hwysgroup.com/">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{--primary:#2C5282;--secondary:#4A5568;--accent:#3182CE;--bg:#F7FAFC;--surface:#fff;--text:#1A202C;--muted:#718096;--radius:6px;--max:1120px;--gap:clamp(3.5rem,7vw,5rem);--px:clamp(1.25rem,4vw,2rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.75;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:9999}
.skip:focus{left:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #E2E8F0}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem;position:relative}
.logo{font-weight:700;font-size:1.125rem;color:var(--primary);letter-spacing:.02em}
.logo span{display:block;font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:.08em}
.nav-toggle{display:none;background:none;border:1px solid #CBD5E0;border-radius:var(--radius);padding:.4rem .65rem;font:inherit;cursor:pointer;min-height:44px}
nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;margin:0;padding:0}
nav a{color:var(--secondary);font-size:.85rem;font-weight:500;padding:.35rem 0;min-height:44px;display:inline-flex;align-items:center}
nav a:hover{color:var(--primary);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.35rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:background .2s,transform .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2B6CB0;text-decoration:none;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-secondary:hover{background:rgba(44,82,130,.06);text-decoration:none}
.home-surface{padding:var(--gap) 0}
.home-surface:nth-of-type(even){background:var(--surface)}
.site-page{padding:var(--gap) 0;border-top:1px solid #E2E8F0}
.site-page:nth-of-type(even){background:var(--surface)}
.site-page--placeholder{padding:2rem 0;background:#EDF2F7;border-top:1px dashed #CBD5E0}
.site-page--placeholder p{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem}
h1,h2,h3{line-height:1.35;margin:0 0 1rem;color:var(--primary)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,3vw,1.75rem)}
h3{font-size:1.1rem;color:var(--secondary)}
.lead{font-size:1.05rem;color:var(--secondary);max-width:42em}
.hero{background:var(--bg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(44,82,130,.07) 1px,transparent 0);background-size:24px 24px;pointer-events:none;opacity:.5}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;position:relative}
@media(min-width:768px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-visual{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid #E2E8F0;background:linear-gradient(135deg,#EDF2F7 0%,#fff 50%,#EBF8FF 100%);position:relative;overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:12%;border:1px solid rgba(44,82,130,.15);border-radius:2px}
.hero-visual::after{content:"";position:absolute;left:12%;right:12%;top:35%;height:1px;background:rgba(44,82,130,.12)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tag{font-size:.8rem;padding:.25rem .65rem;border-radius:999px;background:#EDF2F7;color:var(--secondary);border:1px solid #E2E8F0}
.card-grid{display:grid;gap:1.25rem}
@media(min-width:640px){.card-grid.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{display:block;background:var(--surface);border:1px solid #E2E8F0;border-radius:var(--radius);padding:1.35rem 1.25rem;transition:box-shadow .2s,border-color .2s;color:inherit}
.card:hover{box-shadow:0 4px 20px rgba(26,32,44,.06);border-color:#CBD5E0;text-decoration:none}
.card p{margin:.5rem 0 0;font-size:.925rem;color:var(--muted)}
.card .more{font-size:.8rem;color:var(--accent);font-weight:700;margin-top:.75rem;display:inline-block}
.strength-list{display:grid;gap:1rem}
@media(min-width:768px){.strength-list{grid-template-columns:repeat(3,1fr)}}
.strength-item{padding:1.25rem;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.message-box{max-width:52em}
.message-box p{margin:0 0 1rem}
.trust-quote{border-left:3px solid var(--accent);padding:1rem 1.25rem;background:#EDF2F7;border-radius:0 var(--radius) var(--radius) 0;margin:0;font-size:.95rem;color:var(--secondary)}
.cta-band{text-align:center;background:linear-gradient(180deg,#EDF2F7,#F7FAFC);border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;padding:var(--gap) 0}
.cta-band p{color:var(--secondary);max-width:36em;margin:0 auto 1.25rem}
.contact-form{max-width:36em;margin:0 auto}
.form-row{margin-bottom:1rem}
.form-row label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.65rem .75rem;border:1px solid #CBD5E0;border-radius:var(--radius);font:inherit;background:#fff;min-height:44px}
.form-row textarea{min-height:140px;resize:vertical}
.req{color:#C53030;font-size:.8rem;margin-left:.25rem}
.form-note{font-size:.85rem;color:var(--muted);margin-bottom:1.25rem;padding:1rem;background:#EDF2F7;border-radius:var(--radius);border-left:3px solid var(--accent)}
.after-note{font-size:.875rem;color:var(--muted);margin-top:1.25rem;padding:1rem;border:1px solid #E2E8F0;border-radius:var(--radius)}
.site-footer{background:var(--primary);color:#E2E8F0;padding:2.5rem 0 2rem;font-size:.875rem}
.site-footer a{color:#BEE3F8}
.footer-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr}}
.footer-meta{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem;color:#A0AEC0}
.layout-b .service-teaser-first{order:-1}
.layout-c .trust-expanded{max-width:48em}
.layout-d .card-grid.cols-4 .card{text-align:center}
.layout-e .hero-band{background:linear-gradient(180deg,rgba(49,130,206,.08),transparent);margin:0 calc(-1 * var(--px));padding-left:var(--px);padding-right:var(--px)}
@media(max-width:767px){
.nav-toggle{display:block}
nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #E2E8F0;display:none;padding:1rem var(--px);max-height:70vh;overflow-y:auto}
nav.open{display:block}
nav ul{flex-direction:column;gap:.25rem}
}
</style>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Organization","name":"HWYS株式会社","url":"https://hwysgroup.com/","email":"haruki_kimura@hwysgroup.com","description":"業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発"}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","name":"HWYS株式会社","url":"https://hwysgroup.com/"}
</script>
</head>
<body>
<a class="skip" href="#main">本文へスキップ</a><header class="site-header">
<div class="container header-inner">
<a class="logo" href="#top">HWYS株式会社<span>Honest with yourself</span></a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" id="nav-btn">メニュー</button>
<nav id="site-nav" aria-label="メインナビゲーション">
<ul>
<li><a href="#top">HOME</a></li><li><a href="#page-concept">理念</a></li><li><a href="#page-message">代表挨拶</a></li><li><a href="#page-service-bpo">BPO</a></li><li><a href="#page-service-web">Web制作</a></li><li><a href="#page-service-ec">EC運営</a></li><li><a href="#page-service-rd">研究開発</a></li><li><a href="#page-strength">強み</a></li><li><a href="#page-company">会社概要</a></li><li><a href="#page-contact">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header><main id="main"><section class="hero home-surface layout-c" id="top">
<div class="container hero-grid">
<div>
<p class="section-label">Structure First</p>
<h1>事業を、構造から強くする</h1>
<p class="lead">HWYS株式会社は、業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発を通じ、経営者の貴重なリソースを「成長」へ向け直す伴走者です。</p>
<div class="tag-row">
<span class="tag">業務請負 BPO</span>
<span class="tag">完全オリジナルWeb</span>
<span class="tag">EC運営</span>
<span class="tag">研究開発</span>
</div>
<div class="hero-actions">
<a class="btn btn-primary" href="#page-contact">事業のご相談</a>
<a class="btn btn-secondary" href="#page-service-bpo">事業内容を見る</a>
</div>
</div>
<div class="hero-visual" role="img" aria-label="構造と土台を示す抽象グリッド"></div>
</div>
</section>

<section class="home-surface layout-c" id="home-positioning">
<div class="container">
<p class="section-label">Positioning</p>
<h2>装飾より、目に見えない「構造」と土台</h2>
<p class="lead">特定の手法を売るのではなく、お客様の事業を構造から強くするパートナーとして、BPO・Web・EC・研究開発を一貫した哲学でつなぎます。</p>
<a class="btn btn-secondary" href="#page-concept">理念を詳しく見る</a>
</div>
</section>

<section class="home-surface layout-c" id="home-services">
<div class="container">
<p class="section-label">Services</p>
<h2>事業概要</h2>
<div class="card-grid cols-2 cols-4">
<a class="card" href="#page-service-bpo"><h3>業務請負（BPO）</h3><p>リソースをコア業務へ。人手不足・繁忙期に伴走。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-web"><h3>ホームページ制作事業(コーポレートサイト専門)</h3><p>思想翻訳に基づく完全オリジナル静的サイト。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-ec"><h3>ECサイト運営(国内・越境)</h3><p>国内・越境EC。物販・卸・仕入れ代行。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-rd"><h3>研究/開発</h3><p>新商品開発と提携・商談会の場づくり。</p><span class="more">詳しく見る →</span></a>
</div>
</div>
</section>

<section class="home-surface layout-c" id="home-trust">
<div class="container">
<p class="section-label">Trust</p>
<h2>行動で示す誠実さ</h2>
<blockquote class="trust-quote trust-expanded">「信用を築くには一生かかるが、失うのは一瞬である」——代表の原点は建築士としての現場と、行動で示す誠実さです。<a href="#page-message">代表挨拶を読む</a></blockquote>
</div>
</section>

運営メモ（顧客非表示）

案 D ラベル（顧客向け短い名前） HTML（HOME トップの断片または全文）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HWYS株式会社 | 4事業並列（HOME案）</title>
<meta name="description" content="大阪のHWYS株式会社。業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。建築士の視点で事業の土台を支え、経営者のリソースを成長に向けます。">
<link rel="canonical" href="https://hwysgroup.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="HWYS株式会社 | 事業を、構造から強くする">
<meta property="og:description" content="業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。構造から事業を支える伴走者。">
<meta property="og:url" content="https://hwysgroup.com/">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{--primary:#2C5282;--secondary:#4A5568;--accent:#3182CE;--bg:#F7FAFC;--surface:#fff;--text:#1A202C;--muted:#718096;--radius:6px;--max:1120px;--gap:clamp(3.5rem,7vw,5rem);--px:clamp(1.25rem,4vw,2rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.75;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:9999}
.skip:focus{left:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #E2E8F0}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem;position:relative}
.logo{font-weight:700;font-size:1.125rem;color:var(--primary);letter-spacing:.02em}
.logo span{display:block;font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:.08em}
.nav-toggle{display:none;background:none;border:1px solid #CBD5E0;border-radius:var(--radius);padding:.4rem .65rem;font:inherit;cursor:pointer;min-height:44px}
nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;margin:0;padding:0}
nav a{color:var(--secondary);font-size:.85rem;font-weight:500;padding:.35rem 0;min-height:44px;display:inline-flex;align-items:center}
nav a:hover{color:var(--primary);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.35rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:background .2s,transform .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2B6CB0;text-decoration:none;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-secondary:hover{background:rgba(44,82,130,.06);text-decoration:none}
.home-surface{padding:var(--gap) 0}
.home-surface:nth-of-type(even){background:var(--surface)}
.site-page{padding:var(--gap) 0;border-top:1px solid #E2E8F0}
.site-page:nth-of-type(even){background:var(--surface)}
.site-page--placeholder{padding:2rem 0;background:#EDF2F7;border-top:1px dashed #CBD5E0}
.site-page--placeholder p{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem}
h1,h2,h3{line-height:1.35;margin:0 0 1rem;color:var(--primary)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,3vw,1.75rem)}
h3{font-size:1.1rem;color:var(--secondary)}
.lead{font-size:1.05rem;color:var(--secondary);max-width:42em}
.hero{background:var(--bg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(44,82,130,.07) 1px,transparent 0);background-size:24px 24px;pointer-events:none;opacity:.5}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;position:relative}
@media(min-width:768px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-visual{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid #E2E8F0;background:linear-gradient(135deg,#EDF2F7 0%,#fff 50%,#EBF8FF 100%);position:relative;overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:12%;border:1px solid rgba(44,82,130,.15);border-radius:2px}
.hero-visual::after{content:"";position:absolute;left:12%;right:12%;top:35%;height:1px;background:rgba(44,82,130,.12)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tag{font-size:.8rem;padding:.25rem .65rem;border-radius:999px;background:#EDF2F7;color:var(--secondary);border:1px solid #E2E8F0}
.card-grid{display:grid;gap:1.25rem}
@media(min-width:640px){.card-grid.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{display:block;background:var(--surface);border:1px solid #E2E8F0;border-radius:var(--radius);padding:1.35rem 1.25rem;transition:box-shadow .2s,border-color .2s;color:inherit}
.card:hover{box-shadow:0 4px 20px rgba(26,32,44,.06);border-color:#CBD5E0;text-decoration:none}
.card p{margin:.5rem 0 0;font-size:.925rem;color:var(--muted)}
.card .more{font-size:.8rem;color:var(--accent);font-weight:700;margin-top:.75rem;display:inline-block}
.strength-list{display:grid;gap:1rem}
@media(min-width:768px){.strength-list{grid-template-columns:repeat(3,1fr)}}
.strength-item{padding:1.25rem;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.message-box{max-width:52em}
.message-box p{margin:0 0 1rem}
.trust-quote{border-left:3px solid var(--accent);padding:1rem 1.25rem;background:#EDF2F7;border-radius:0 var(--radius) var(--radius) 0;margin:0;font-size:.95rem;color:var(--secondary)}
.cta-band{text-align:center;background:linear-gradient(180deg,#EDF2F7,#F7FAFC);border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;padding:var(--gap) 0}
.cta-band p{color:var(--secondary);max-width:36em;margin:0 auto 1.25rem}
.contact-form{max-width:36em;margin:0 auto}
.form-row{margin-bottom:1rem}
.form-row label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.65rem .75rem;border:1px solid #CBD5E0;border-radius:var(--radius);font:inherit;background:#fff;min-height:44px}
.form-row textarea{min-height:140px;resize:vertical}
.req{color:#C53030;font-size:.8rem;margin-left:.25rem}
.form-note{font-size:.85rem;color:var(--muted);margin-bottom:1.25rem;padding:1rem;background:#EDF2F7;border-radius:var(--radius);border-left:3px solid var(--accent)}
.after-note{font-size:.875rem;color:var(--muted);margin-top:1.25rem;padding:1rem;border:1px solid #E2E8F0;border-radius:var(--radius)}
.site-footer{background:var(--primary);color:#E2E8F0;padding:2.5rem 0 2rem;font-size:.875rem}
.site-footer a{color:#BEE3F8}
.footer-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr}}
.footer-meta{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem;color:#A0AEC0}
.layout-b .service-teaser-first{order:-1}
.layout-c .trust-expanded{max-width:48em}
.layout-d .card-grid.cols-4 .card{text-align:center}
.layout-e .hero-band{background:linear-gradient(180deg,rgba(49,130,206,.08),transparent);margin:0 calc(-1 * var(--px));padding-left:var(--px);padding-right:var(--px)}
@media(max-width:767px){
.nav-toggle{display:block}
nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #E2E8F0;display:none;padding:1rem var(--px);max-height:70vh;overflow-y:auto}
nav.open{display:block}
nav ul{flex-direction:column;gap:.25rem}
}
</style>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Organization","name":"HWYS株式会社","url":"https://hwysgroup.com/","email":"haruki_kimura@hwysgroup.com","description":"業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発"}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","name":"HWYS株式会社","url":"https://hwysgroup.com/"}
</script>
</head>
<body>
<a class="skip" href="#main">本文へスキップ</a><header class="site-header">
<div class="container header-inner">
<a class="logo" href="#top">HWYS株式会社<span>Honest with yourself</span></a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" id="nav-btn">メニュー</button>
<nav id="site-nav" aria-label="メインナビゲーション">
<ul>
<li><a href="#top">HOME</a></li><li><a href="#page-concept">理念</a></li><li><a href="#page-message">代表挨拶</a></li><li><a href="#page-service-bpo">BPO</a></li><li><a href="#page-service-web">Web制作</a></li><li><a href="#page-service-ec">EC運営</a></li><li><a href="#page-service-rd">研究開発</a></li><li><a href="#page-strength">強み</a></li><li><a href="#page-company">会社概要</a></li><li><a href="#page-contact">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header><main id="main"><section class="hero home-surface layout-d" id="top">
<div class="container hero-grid">
<div>
<p class="section-label">Structure First</p>
<h1>事業を、構造から強くする</h1>
<p class="lead">HWYS株式会社は、業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発を通じ、経営者の貴重なリソースを「成長」へ向け直す伴走者です。</p>
<div class="tag-row">
<span class="tag">業務請負 BPO</span>
<span class="tag">完全オリジナルWeb</span>
<span class="tag">EC運営</span>
<span class="tag">研究開発</span>
</div>
<div class="hero-actions">
<a class="btn btn-primary" href="#page-contact">事業のご相談</a>
<a class="btn btn-secondary" href="#page-service-bpo">事業内容を見る</a>
</div>
</div>
<div class="hero-visual" role="img" aria-label="構造と土台を示す抽象グリッド"></div>
</div>
</section>

<section class="home-surface layout-d" id="home-positioning">
<div class="container">
<p class="section-label">Positioning</p>
<h2>装飾より、目に見えない「構造」と土台</h2>
<p class="lead">特定の手法を売るのではなく、お客様の事業を構造から強くするパートナーとして、BPO・Web・EC・研究開発を一貫した哲学でつなぎます。</p>
<a class="btn btn-secondary" href="#page-concept">理念を詳しく見る</a>
</div>
</section>

<section class="home-surface layout-d" id="home-services">
<div class="container">
<p class="section-label">Services</p>
<h2>事業概要</h2>
<div class="card-grid cols-2 cols-4">
<a class="card" href="#page-service-bpo"><h3>業務請負（BPO）</h3><p>リソースをコア業務へ。人手不足・繁忙期に伴走。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-web"><h3>ホームページ制作事業(コーポレートサイト専門)</h3><p>思想翻訳に基づく完全オリジナル静的サイト。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-ec"><h3>ECサイト運営(国内・越境)</h3><p>国内・越境EC。物販・卸・仕入れ代行。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-rd"><h3>研究/開発</h3><p>新商品開発と提携・商談会の場づくり。</p><span class="more">詳しく見る →</span></a>
</div>
</div>
</section>

<section class="home-surface layout-d" id="home-trust">
<div class="container">
<p class="section-label">Trust</p>
<h2>行動で示す誠実さ</h2>
<blockquote class="trust-quote">言葉より、行動と事実で信頼を積み上げます。営業目的のお問い合わせはお断りしています。</blockquote>
</div>
</section>

運営メモ（顧客非表示）

案 E ラベル（顧客向け短い名前） HTML（HOME トップの断片または全文）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HWYS株式会社 | 顧客要望反映（HOME案）</title>
<meta name="description" content="大阪のHWYS株式会社。業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。建築士の視点で事業の土台を支え、経営者のリソースを成長に向けます。">
<link rel="canonical" href="https://hwysgroup.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="HWYS株式会社 | 事業を、構造から強くする">
<meta property="og:description" content="業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発。構造から事業を支える伴走者。">
<meta property="og:url" content="https://hwysgroup.com/">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
<style>
:root{--primary:#2C5282;--secondary:#4A5568;--accent:#3182CE;--bg:#F7FAFC;--surface:#fff;--text:#1A202C;--muted:#718096;--radius:6px;--max:1120px;--gap:clamp(3.5rem,7vw,5rem);--px:clamp(1.25rem,4vw,2rem)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.75;color:var(--text);background:var(--bg)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:.5rem 1rem;z-index:9999}
.skip:focus{left:0}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #E2E8F0}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem;position:relative}
.logo{font-weight:700;font-size:1.125rem;color:var(--primary);letter-spacing:.02em}
.logo span{display:block;font-size:.7rem;font-weight:400;color:var(--muted);letter-spacing:.08em}
.nav-toggle{display:none;background:none;border:1px solid #CBD5E0;border-radius:var(--radius);padding:.4rem .65rem;font:inherit;cursor:pointer;min-height:44px}
nav ul{display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;margin:0;padding:0}
nav a{color:var(--secondary);font-size:.85rem;font-weight:500;padding:.35rem 0;min-height:44px;display:inline-flex;align-items:center}
nav a:hover{color:var(--primary);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1.35rem;border-radius:var(--radius);font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:background .2s,transform .2s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2B6CB0;text-decoration:none;transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-secondary:hover{background:rgba(44,82,130,.06);text-decoration:none}
.home-surface{padding:var(--gap) 0}
.home-surface:nth-of-type(even){background:var(--surface)}
.site-page{padding:var(--gap) 0;border-top:1px solid #E2E8F0}
.site-page:nth-of-type(even){background:var(--surface)}
.site-page--placeholder{padding:2rem 0;background:#EDF2F7;border-top:1px dashed #CBD5E0}
.site-page--placeholder p{margin:0;font-size:.85rem;color:var(--muted);text-align:center}
.section-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .75rem}
h1,h2,h3{line-height:1.35;margin:0 0 1rem;color:var(--primary)}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.35rem,3vw,1.75rem)}
h3{font-size:1.1rem;color:var(--secondary)}
.lead{font-size:1.05rem;color:var(--secondary);max-width:42em}
.hero{background:var(--bg);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 1px 1px,rgba(44,82,130,.07) 1px,transparent 0);background-size:24px 24px;pointer-events:none;opacity:.5}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;position:relative}
@media(min-width:768px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero-visual{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid #E2E8F0;background:linear-gradient(135deg,#EDF2F7 0%,#fff 50%,#EBF8FF 100%);position:relative;overflow:hidden}
.hero-visual::before{content:"";position:absolute;inset:12%;border:1px solid rgba(44,82,130,.15);border-radius:2px}
.hero-visual::after{content:"";position:absolute;left:12%;right:12%;top:35%;height:1px;background:rgba(44,82,130,.12)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.tag-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.tag{font-size:.8rem;padding:.25rem .65rem;border-radius:999px;background:#EDF2F7;color:var(--secondary);border:1px solid #E2E8F0}
.card-grid{display:grid;gap:1.25rem}
@media(min-width:640px){.card-grid.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.card-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.card{display:block;background:var(--surface);border:1px solid #E2E8F0;border-radius:var(--radius);padding:1.35rem 1.25rem;transition:box-shadow .2s,border-color .2s;color:inherit}
.card:hover{box-shadow:0 4px 20px rgba(26,32,44,.06);border-color:#CBD5E0;text-decoration:none}
.card p{margin:.5rem 0 0;font-size:.925rem;color:var(--muted)}
.card .more{font-size:.8rem;color:var(--accent);font-weight:700;margin-top:.75rem;display:inline-block}
.strength-list{display:grid;gap:1rem}
@media(min-width:768px){.strength-list{grid-template-columns:repeat(3,1fr)}}
.strength-item{padding:1.25rem;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0}
.message-box{max-width:52em}
.message-box p{margin:0 0 1rem}
.trust-quote{border-left:3px solid var(--accent);padding:1rem 1.25rem;background:#EDF2F7;border-radius:0 var(--radius) var(--radius) 0;margin:0;font-size:.95rem;color:var(--secondary)}
.cta-band{text-align:center;background:linear-gradient(180deg,#EDF2F7,#F7FAFC);border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;padding:var(--gap) 0}
.cta-band p{color:var(--secondary);max-width:36em;margin:0 auto 1.25rem}
.contact-form{max-width:36em;margin:0 auto}
.form-row{margin-bottom:1rem}
.form-row label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:.65rem .75rem;border:1px solid #CBD5E0;border-radius:var(--radius);font:inherit;background:#fff;min-height:44px}
.form-row textarea{min-height:140px;resize:vertical}
.req{color:#C53030;font-size:.8rem;margin-left:.25rem}
.form-note{font-size:.85rem;color:var(--muted);margin-bottom:1.25rem;padding:1rem;background:#EDF2F7;border-radius:var(--radius);border-left:3px solid var(--accent)}
.after-note{font-size:.875rem;color:var(--muted);margin-top:1.25rem;padding:1rem;border:1px solid #E2E8F0;border-radius:var(--radius)}
.site-footer{background:var(--primary);color:#E2E8F0;padding:2.5rem 0 2rem;font-size:.875rem}
.site-footer a{color:#BEE3F8}
.footer-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.footer-grid{grid-template-columns:1.5fr 1fr}}
.footer-meta{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.15);font-size:.8rem;color:#A0AEC0}
.layout-b .service-teaser-first{order:-1}
.layout-c .trust-expanded{max-width:48em}
.layout-d .card-grid.cols-4 .card{text-align:center}
.layout-e .hero-band{background:linear-gradient(180deg,rgba(49,130,206,.08),transparent);margin:0 calc(-1 * var(--px));padding-left:var(--px);padding-right:var(--px)}
@media(max-width:767px){
.nav-toggle{display:block}
nav{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid #E2E8F0;display:none;padding:1rem var(--px);max-height:70vh;overflow-y:auto}
nav.open{display:block}
nav ul{flex-direction:column;gap:.25rem}
}
</style>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Organization","name":"HWYS株式会社","url":"https://hwysgroup.com/","email":"haruki_kimura@hwysgroup.com","description":"業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発"}
</script>
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"WebSite","name":"HWYS株式会社","url":"https://hwysgroup.com/"}
</script>
</head>
<body>
<a class="skip" href="#main">本文へスキップ</a><header class="site-header">
<div class="container header-inner">
<a class="logo" href="#top">HWYS株式会社<span>Honest with yourself</span></a>
<button class="nav-toggle" type="button" aria-expanded="false" aria-controls="site-nav" id="nav-btn">メニュー</button>
<nav id="site-nav" aria-label="メインナビゲーション">
<ul>
<li><a href="#top">HOME</a></li><li><a href="#page-concept">理念</a></li><li><a href="#page-message">代表挨拶</a></li><li><a href="#page-service-bpo">BPO</a></li><li><a href="#page-service-web">Web制作</a></li><li><a href="#page-service-ec">EC運営</a></li><li><a href="#page-service-rd">研究開発</a></li><li><a href="#page-strength">強み</a></li><li><a href="#page-company">会社概要</a></li><li><a href="#page-contact">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header><main id="main"><section class="hero home-surface layout-e hero-band" id="top">
<div class="container hero-grid">
<div>
<p class="section-label">Structure First</p>
<h1>事業を、構造から強くする</h1>
<p class="lead">HWYS株式会社は、業務請負（BPO）・完全オリジナルWeb制作・EC運営・研究開発を通じ、経営者の貴重なリソースを「成長」へ向け直す伴走者です。</p>
<div class="tag-row">
<span class="tag">業務請負 BPO</span>
<span class="tag">完全オリジナルWeb</span>
<span class="tag">EC運営</span>
<span class="tag">研究開発</span>
</div>
<div class="hero-actions">
<a class="btn btn-primary" href="#page-contact">事業のご相談</a>
<a class="btn btn-secondary" href="#page-service-bpo">事業内容を見る</a>
</div>
</div>
<div class="hero-visual" role="img" aria-label="構造と土台を示す抽象グリッド"></div>
</div>
</section>

<section class="home-surface layout-e" id="home-positioning">
<div class="container">
<p class="section-label">Positioning</p>
<h2>装飾より、目に見えない「構造」と土台</h2>
<p class="lead">特定の手法を売るのではなく、お客様の事業を構造から強くするパートナーとして、BPO・Web・EC・研究開発を一貫した哲学でつなぎます。</p>
<a class="btn btn-secondary" href="#page-concept">理念を詳しく見る</a>
</div>
</section>

<section class="home-surface layout-e" id="home-services">
<div class="container">
<p class="section-label">Services</p>
<h2>事業概要</h2>
<div class="card-grid cols-2 cols-4">
<a class="card" href="#page-service-bpo"><h3>業務請負（BPO）</h3><p>リソースをコア業務へ。人手不足・繁忙期に伴走。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-web"><h3>ホームページ制作事業(コーポレートサイト専門)</h3><p>思想翻訳に基づく完全オリジナル静的サイト。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-ec"><h3>ECサイト運営(国内・越境)</h3><p>国内・越境EC。物販・卸・仕入れ代行。</p><span class="more">詳しく見る →</span></a><a class="card" href="#page-service-rd"><h3>研究/開発</h3><p>新商品開発と提携・商談会の場づくり。</p><span class="more">詳しく見る →</span></a>
</div>
</div>
</section>

<section class="home-surface layout-e" id="home-trust">
<div class="container">
<p class="section-label">Trust</p>
<h2>行動で示す誠実さ</h2>
<blockquote class="trust-quote">言葉より、行動と事実で信頼を積み上げます。営業目的のお問い合わせはお断りしています。</blockquote>
</div>
</section>

運営メモ（顧客非表示）

Cursor で生成した HTML を各案に貼り付け、公開後に顧客が1案を選ぶと html_content へ正本コピーされます（骨格実装済み）。