<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nornｓ合同会社 | Norns LLC</title>
<meta name="description" content="Ｎｏｒｎｓ合同会社 - 広告代理業・Webサイト制作・ITシステム開発">
<!-- WordPress風 Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,300;0,600;1,300&display=swap" rel="stylesheet">
<style>
/* ========================================
WordPress テーマ互換CSS変数
======================================== */
:root {
--color-bg: #fafaf8;
--color-bg-dark: #0b1421;
--color-primary: #0d2240;
--color-accent: #b8975a;
--color-accent2: #d4af72;
--color-text: #1a1a1a;
--color-muted: #6b6b6b;
--color-border: #e2ddd6;
--color-white: #ffffff;
--font-serif: 'Noto Serif JP', 'Cormorant Garamond', serif;
--font-sans: 'Noto Sans JP', sans-serif;
--font-display: 'Cormorant Garamond', 'Noto Serif JP', serif;
--max-width: 1160px;
--section-gap: 100px;
--radius: 4px;
}
/* ========================================
Reset / Base
======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--font-sans);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.8;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
/* ========================================
WordPress wp-block 互換ラッパー
======================================== */
.wp-site-blocks { overflow-x: hidden; }
.entry-content, .page-content { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
/* ========================================
Header / Navigation
======================================== */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(11, 20, 33, 0.96);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(184, 151, 90, 0.2);
transition: all 0.3s ease;
}
.header-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 32px;
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
}
.site-logo {
display: flex;
flex-direction: column;
gap: 1px;
}
.logo-en {
font-family: var(--font-display);
font-size: 22px;
font-weight: 300;
letter-spacing: 0.25em;
color: var(--color-white);
line-height: 1;
}
.logo-jp {
font-family: var(--font-sans);
font-size: 9px;
letter-spacing: 0.3em;
color: var(--color-accent);
text-transform: uppercase;
line-height: 1;
}
.site-nav {
display: flex;
align-items: center;
gap: 40px;
}
.site-nav a {
font-size: 12px;
letter-spacing: 0.15em;
color: rgba(255,255,255,0.75);
transition: color 0.2s;
position: relative;
}
.site-nav a::after {
content: '';
position: absolute;
bottom: -4px; left: 0; right: 0;
height: 1px;
background: var(--color-accent);
transform: scaleX(0);
transition: transform 0.25s ease;
}
.site-nav a:hover { color: var(--color-accent2); }
.site-nav a:hover::after { transform: scaleX(1); }
.nav-contact-btn {
padding: 9px 24px;
border: 1px solid var(--color-accent);
color: var(--color-accent) !important;
font-size: 11px !important;
letter-spacing: 0.15em;
transition: all 0.25s ease !important;
border-radius: var(--radius);
}
.nav-contact-btn:hover {
background: var(--color-accent) !important;
color: var(--color-bg-dark) !important;
}
.nav-contact-btn::after { display: none !important; }
/* Hamburger */
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 8px;
}
.menu-toggle span {
display: block; width: 24px; height: 1.5px;
background: var(--color-white);
transition: all 0.3s;
}
/* ========================================
Hero Section
======================================== */
.hero-section {
position: relative;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--color-bg-dark);
}
.hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 70% 60% at 80% 50%, rgba(184,151,90,0.08) 0%, transparent 70%),
radial-gradient(ellipse 50% 80% at 10% 80%, rgba(13,34,64,0.8) 0%, transparent 60%),
linear-gradient(135deg, #0b1421 0%, #0f1e35 50%, #0b1421 100%);
}
.hero-grid-overlay {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(184,151,90,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(184,151,90,0.05) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
}
.hero-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px;
position: relative;
z-index: 2;
width: 100%;
}
.hero-label {
display: inline-block;
font-family: var(--font-display);
font-size: 12px;
letter-spacing: 0.4em;
color: var(--color-accent);
margin-bottom: 24px;
text-transform: uppercase;
}
.hero-title-en {
font-family: var(--font-display);
font-size: clamp(52px, 8vw, 104px);
font-weight: 300;
font-style: italic;
color: var(--color-white);
line-height: 1.05;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.hero-title-en span {
color: var(--color-accent2);
font-style: normal;
font-weight: 600;
}
.hero-title-jp {
font-family: var(--font-serif);
font-size: clamp(18px, 2.5vw, 28px);
font-weight: 400;
color: rgba(255,255,255,0.55);
letter-spacing: 0.3em;
margin-bottom: 40px;
}
.hero-desc {
font-size: 14px;
color: rgba(255,255,255,0.55);
letter-spacing: 0.1em;
max-width: 440px;
line-height: 2;
margin-bottom: 56px;
}
.hero-cta-group {
display: flex;
gap: 20px;
align-items: center;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 36px;
background: var(--color-accent);
color: var(--color-bg-dark);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
border-radius: var(--radius);
transition: all 0.25s ease;
text-transform: uppercase;
}
.btn-primary:hover {
background: var(--color-accent2);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(184,151,90,0.3);
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: rgba(255,255,255,0.6);
letter-spacing: 0.15em;
transition: color 0.2s;
}
.btn-secondary:hover { color: var(--color-accent2); }
.hero-scroll-hint {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
color: rgba(255,255,255,0.35);
font-size: 10px;
letter-spacing: 0.3em;
}
.scroll-line {
width: 1px;
height: 50px;
background: linear-gradient(to bottom, transparent, rgba(184,151,90,0.6));
animation: scrollPulse 2s infinite;
}
@keyframes scrollPulse {
0%, 100% { opacity: 0.4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.1); }
}
/* ========================================
Section Common
======================================== */
.section-header {
margin-bottom: 64px;
}
.section-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
}
.eyebrow-line {
width: 40px;
height: 1px;
background: var(--color-accent);
}
.eyebrow-text {
font-family: var(--font-display);
font-size: 11px;
letter-spacing: 0.4em;
color: var(--color-accent);
text-transform: uppercase;
}
.section-title-jp {
font-family: var(--font-serif);
font-size: clamp(28px, 4vw, 44px);
font-weight: 600;
color: var(--color-primary);
letter-spacing: 0.05em;
line-height: 1.3;
}
.section-title-dark {
color: var(--color-white);
}
/* ========================================
Mission Section
======================================== */
.mission-section {
padding: var(--section-gap) 0;
background: var(--color-white);
}
.mission-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.mission-visual {
position: relative;
aspect-ratio: 4/3;
}
.mission-box {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary) 0%, #1a3a60 100%);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
.mission-box::before {
content: 'NORNS';
font-family: var(--font-display);
font-size: 80px;
font-weight: 300;
color: rgba(255,255,255,0.04);
letter-spacing: 0.2em;
position: absolute;
}
.mission-box-inner {
text-align: center;
z-index: 1;
}
.mission-symbol {
font-family: var(--font-display);
font-size: 64px;
font-weight: 300;
color: var(--color-accent2);
line-height: 1;
display: block;
}
.mission-subtitle-box {
font-size: 11px;
letter-spacing: 0.3em;
color: rgba(255,255,255,0.5);
margin-top: 8px;
}
.mission-deco {
position: absolute;
bottom: -20px;
right: -20px;
width: 120px;
height: 120px;
border: 1px solid var(--color-accent);
opacity: 0.3;
}
.mission-body p {
font-size: 15px;
line-height: 2.2;
color: #3a3a3a;
margin-bottom: 20px;
}
.mission-body p:last-child { margin-bottom: 0; }
.mission-highlight {
font-family: var(--font-serif);
font-size: 19px !important;
font-weight: 600;
color: var(--color-primary) !important;
line-height: 1.8 !important;
border-left: 3px solid var(--color-accent);
padding-left: 20px;
margin-bottom: 28px !important;
}
/* ========================================
Service Section
======================================== */
.service-section {
padding: var(--section-gap) 0;
background: var(--color-bg);
}
.service-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px;
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
margin-top: 56px;
}
.service-card {
background: var(--color-white);
padding: 48px 36px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--color-accent);
transform: scaleX(0);
transition: transform 0.35s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,0.08); }
.service-card:hover::before { transform: scaleX(1); }
.service-num {
font-family: var(--font-display);
font-size: 44px;
font-weight: 300;
color: rgba(13,34,64,0.08);
line-height: 1;
margin-bottom: 16px;
}
.service-icon {
width: 44px;
height: 44px;
margin-bottom: 20px;
color: var(--color-accent);
}
.service-name {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 600;
color: var(--color-primary);
margin-bottom: 12px;
letter-spacing: 0.05em;
line-height: 1.5;
}
.service-desc {
font-size: 13px;
color: var(--color-muted);
line-height: 1.9;
}
/* ========================================
Company Info Section
======================================== */
.company-section {
padding: var(--section-gap) 0;
background: var(--color-primary);
position: relative;
overflow: hidden;
}
.company-section::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 100% 0%, rgba(184,151,90,0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 80% at 0% 100%, rgba(184,151,90,0.04) 0%, transparent 60%);
}
.company-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px;
position: relative;
z-index: 1;
}
.company-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 80px;
align-items: start;
margin-top: 56px;
}
.company-table-wrap {
grid-column: 1 / -1;
}
.company-table {
width: 100%;
border-collapse: collapse;
}
.company-table tr {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.company-table tr:first-child {
border-top: 1px solid rgba(255,255,255,0.08);
}
.company-table th {
width: 200px;
padding: 28px 0;
font-family: var(--font-serif);
font-size: 13px;
font-weight: 600;
color: var(--color-accent2);
letter-spacing: 0.15em;
text-align: left;
vertical-align: top;
white-space: nowrap;
}
.company-table td {
padding: 28px 0 28px 40px;
font-size: 14px;
color: rgba(255,255,255,0.82);
line-height: 1.9;
vertical-align: top;
}
.company-table td ul {
display: flex;
flex-direction: column;
gap: 6px;
}
.company-table td ul li {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13.5px;
}
.company-table td ul li::before {
content: '—';
color: var(--color-accent);
flex-shrink: 0;
margin-top: 1px;
font-size: 11px;
}
/* ========================================
Access Section
======================================== */
.access-section {
padding: var(--section-gap) 0;
background: var(--color-white);
}
.access-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px;
}
.access-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
margin-top: 56px;
}
.access-info { }
.access-address-block {
margin-bottom: 40px;
}
.access-label {
font-size: 11px;
letter-spacing: 0.3em;
color: var(--color-accent);
margin-bottom: 10px;
text-transform: uppercase;
}
.access-address {
font-family: var(--font-serif);
font-size: 16px;
line-height: 2;
color: var(--color-primary);
}
.access-detail-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.access-detail-item {
background: var(--color-bg);
padding: 16px 24px;
border-left: 2px solid var(--color-accent);
}
.access-detail-item .label {
font-size: 10px;
letter-spacing: 0.2em;
color: var(--color-muted);
margin-bottom: 4px;
}
.access-detail-item .value {
font-size: 14px;
font-weight: 500;
color: var(--color-primary);
}
.map-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #e8e4de 0%, #ddd9d2 100%);
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
color: var(--color-muted);
font-size: 13px;
letter-spacing: 0.1em;
overflow: hidden;
position: relative;
}
.map-embed {
width: 100%;
aspect-ratio: 4/3;
border: none;
border-radius: 2px;
filter: grayscale(20%);
}
/* ========================================
Contact Section
======================================== */
.contact-section {
padding: var(--section-gap) 0;
background: var(--color-bg-dark);
position: relative;
overflow: hidden;
}
.contact-section::before {
content: 'CONTACT';
position: absolute;
font-family: var(--font-display);
font-size: 180px;
font-weight: 300;
color: rgba(255,255,255,0.02);
letter-spacing: 0.1em;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.contact-inner {
max-width: 700px;
margin: 0 auto;
padding: 0 48px;
text-align: center;
position: relative;
z-index: 1;
}
.contact-tagline {
font-family: var(--font-serif);
font-size: 22px;
color: rgba(255,255,255,0.65);
line-height: 1.9;
margin-bottom: 48px;
letter-spacing: 0.05em;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 16px;
text-align: left;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-label {
font-size: 11px;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
}
.form-input, .form-textarea {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: var(--color-white);
padding: 14px 18px;
font-size: 14px;
font-family: var(--font-sans);
border-radius: var(--radius);
transition: border-color 0.2s;
outline: none;
width: 100%;
}
.form-input:focus, .form-textarea:focus {
border-color: var(--color-accent);
}
.form-textarea { min-height: 140px; resize: vertical; }
.form-submit-wrap { text-align: center; margin-top: 8px; }
.btn-submit {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 56px;
background: transparent;
border: 1px solid var(--color-accent);
color: var(--color-accent);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.25em;
cursor: pointer;
border-radius: var(--radius);
transition: all 0.25s ease;
text-transform: uppercase;
}
.btn-submit:hover {
background: var(--color-accent);
color: var(--color-bg-dark);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(184,151,90,0.2);
}
/* ========================================
Footer
======================================== */
.site-footer {
background: #060d18;
border-top: 1px solid rgba(184,151,90,0.15);
padding: 60px 0 32px;
}
.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 48px;
}
.footer-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 48px;
padding-bottom: 48px;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-logo-en {
font-family: var(--font-display);
font-size: 28px;
font-weight: 300;
color: var(--color-white);
letter-spacing: 0.2em;
display: block;
margin-bottom: 4px;
}
.footer-logo-jp {
font-size: 11px;
letter-spacing: 0.25em;
color: rgba(255,255,255,0.35);
}
.footer-tagline {
font-size: 12px;
color: rgba(255,255,255,0.3);
letter-spacing: 0.1em;
margin-top: 12px;
line-height: 1.9;
}
.footer-nav-cols {
display: flex;
gap: 60px;
}
.footer-nav-col h4 {
font-size: 10px;
letter-spacing: 0.3em;
color: var(--color-accent);
text-transform: uppercase;
margin-bottom: 16px;
}
.footer-nav-col ul {
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-nav-col a {
font-size: 13px;
color: rgba(255,255,255,0.45);
transition: color 0.2s;
letter-spacing: 0.05em;
}
.footer-nav-col a:hover { color: var(--color-accent2); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copy {
font-size: 11px;
color: rgba(255,255,255,0.25);
letter-spacing: 0.1em;
}
/* ========================================
Animations
======================================== */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger children */
.stagger-children > * {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.stagger-children.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(7) { opacity:1; transform:none; transition-delay: 0.6s; }
/* ========================================
Responsive
======================================== */
@media (max-width: 960px) {
:root { --section-gap: 72px; }
.site-nav { display: none; }
.site-nav.open {
display: flex;
flex-direction: column;
position: fixed;
top: 72px; left: 0; right: 0; bottom: 0;
background: rgba(11,20,33,0.98);
align-items: center;
justify-content: center;
gap: 32px;
z-index: 99;
}
.site-nav.open a { font-size: 16px !important; }
.menu-toggle { display: flex; }
.hero-inner { padding: 0 32px; }
.mission-inner { grid-template-columns: 1fr; gap: 48px; }
.mission-visual { aspect-ratio: 16/7; }
.service-grid { grid-template-columns: 1fr 1fr; }
.company-layout { grid-template-columns: 1fr; gap: 0; }
.company-table th { width: 140px; }
.company-table td { padding-left: 24px; }
.access-layout { grid-template-columns: 1fr; }
.footer-top { flex-direction: column; gap: 40px; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
}
@media (max-width: 640px) {
.hero-inner { padding: 0 24px; }
.service-grid { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.company-table th { font-size: 11px; width: 110px; }
.company-inner, .access-inner, .contact-inner, .footer-inner,
.service-inner, .mission-inner { padding-left: 24px; padding-right: 24px; }
.footer-nav-cols { flex-direction: column; gap: 32px; }
}
</style>
</head>
<body class="wp-site-blocks">
<!-- ========================================
HEADER
======================================== -->
<header class="site-header" id="site-header">
<div class="header-inner">
<a href="#" class="site-logo">
<span class="logo-en">Norns</span>
<span class="logo-jp">合同会社</span>
</a>
<nav class="site-nav" id="site-nav">
<a href="#mission">理念</a>
<a href="#service">事業内容</a>
<a href="#company">会社概要</a>
<a href="#access">アクセス</a>
<a href="#contact" class="nav-contact-btn">CONTACT</a>
</nav>
<button class="menu-toggle" id="menu-toggle" aria-label="メニュー">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- ========================================
HERO
======================================== -->
<section class="hero-section">
<div class="hero-bg"></div>
<div class="hero-grid-overlay"></div>
<div class="hero-inner">
<p class="hero-label">Norns LLC — Established 2026</p>
<h1 class="hero-title-en">Shape Your<br><span>Future</span></h1>
<p class="hero-title-jp">未来を、ともに紡ぐ。</p>
<p class="hero-desc">広告代理・Webサイト制作・ITシステム開発を軸に、<br>お客様のビジネス成長を支援します。</p>
<div class="hero-cta-group">
<a href="#service" class="btn-primary">
事業内容を見る
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<a href="#company" class="btn-secondary">
会社概要
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
</div>
</div>
<div class="hero-scroll-hint">
<div class="scroll-line"></div>
<span>SCROLL</span>
</div>
</section>
<!-- ========================================
MISSION
======================================== -->
<section class="mission-section" id="mission">
<div class="mission-inner">
<div class="mission-visual fade-in">
<div class="mission-box">
<div class="mission-box-inner">
<span class="mission-symbol">ᚾ</span>
<div class="mission-subtitle-box">THE THREE NORNS</div>
</div>
</div>
<div class="mission-deco"></div>
</div>
<div class="mission-body fade-in">
<div class="section-header">
<div class="section-eyebrow">
<span class="eyebrow-line"></span>
<span class="eyebrow-text">Our Mission</span>
</div>
<h2 class="section-title-jp">私たちの理念</h2>
</div>
<p class="mission-highlight">
北欧神話の「ノルン」—運命を紡ぐ三女神のように、<br>
お客様の未来を共に創造します。
</p>
<p>
Ｎｏｒｎｓ合同会社は、広告・Web・ITの力を結集し、
クライアントのビジネスに新たな価値をもたらします。
デジタル時代のあらゆる課題に、スピードと誠実さで応えます。
</p>
<p>
小さなチームだからこそできる、柔軟で密度の高い支援。
代表・幅 拓海のもと、お客様一人ひとりに寄り添ったサービスを提供します。
</p>
</div>
</div>
</section>
<!-- ========================================
SERVICE
======================================== -->
<section class="service-section" id="service">
<div class="service-inner">
<div class="section-header fade-in">
<div class="section-eyebrow">
<span class="eyebrow-line"></span>
<span class="eyebrow-text">Business</span>
</div>
<h2 class="section-title-jp">事業内容</h2>
</div>
<div class="service-grid stagger-children">
<div class="service-card">
<div class="service-num">01</div>
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
</svg>
<h3 class="service-name">広告代理業 ・ 宣伝業務</h3>
<p class="service-desc">各種広告媒体の企画・運用・管理を一貫してサポート。成果につながる広告戦略を提供します。</p>
</div>
<div class="service-card">
<div class="service-num">02</div>
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
</svg>
<h3 class="service-name">Webサイト企画・制作・運営</h3>
<p class="service-desc">企画から制作・販売・運営・管理まで、Webサイトのライフサイクル全体を支援します。</p>
</div>
<div class="service-card">
<div class="service-num">03</div>
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17H3a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v3"/>
<path d="M15 10l2 2 4-4"/>
</svg>
<h3 class="service-name">コンピュータシステム開発</h3>
<p class="service-desc">システムの企画・開発・販売から保守まで。ビジネスの効率化を実現するITソリューションを提供します。</p>
</div>
<div class="service-card">
<div class="service-num">04</div>
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 010 20M12 2a15.3 15.3 0 000 20"/>
</svg>
<h3 class="service-name">インターネット情報提供</h3>
<p class="service-desc">インターネットを活用した各種情報提供サービス。価値あるコンテンツとデータを届けます。</p>
</div>
<div class="service-card">
<div class="service-num">05</div>
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
</svg>
<h3 class="service-name">アウトソーシング事業</h3>
<p class="service-desc">業務の受託・請負を通じて、クライアントのコア業務への集中を支援します。</p>
</div>
<div class="service-card">
<div class="service-num">06</div>
<svg class="service-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4zM3 6h18"/><path d="M16 10a4 4 0 01-8 0"/>
</svg>
<h3 class="service-name">古物営業（古物営業法）</h3>
<p class="service-desc">古物営業法に基づく古物営業。リユース・リサイクル分野でのビジネスを展開します。</p>
</div>
</div>
</div>
</section>
<!-- ========================================
COMPANY INFO
======================================== -->
<section class="company-section" id="company">
<div class="company-inner">
<div class="section-header fade-in">
<div class="section-eyebrow">
<span class="eyebrow-line"></span>
<span class="eyebrow-text">Company</span>
</div>
<h2 class="section-title-jp section-title-dark">会社概要</h2>
</div>
<div class="company-table-wrap fade-in">
<table class="company-table">
<tr>
<th>会社名</th>
<td>Ｎｏｒｎｓ合同会社</td>
</tr>
<tr>
<th>代表</th>
<td>幅 拓海</td>
</tr>
<tr>
<th>設立</th>
<td>令和8年（2026年）4月</td>
</tr>
<tr>
<th>資本金</th>
<td>100万円</td>
</tr>
<tr>
<th>所在地</th>
<td>
〒273-0005<br>
千葉県船橋市本町６丁目１８‐１９<br>
第３山中ビル４０１号室
</td>
</tr>
<tr>
<th>従業員数</th>
<td>3名</td>
</tr>
<tr>
<th>事業内容</th>
<td>
<ul>
<li>広告代理業及び各種の宣伝に関する業務</li>
<li>Ｗｅｂサイトの企画、制作、販売、運営及び管理</li>
<li>コンピュータシステムの企画、開発、販売及び保守に関する業務</li>
<li>インターネットを利用した各種情報提供サービス</li>
<li>アウトソーシング事業の受託及び請負</li>
<li>古物営業法に基づく古物営業</li>
<li>前各号に附帯又は関連する一切の事業</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</section>
<!-- ========================================
ACCESS
======================================== -->
<section class="access-section" id="access">
<div class="access-inner">
<div class="section-header fade-in">
<div class="section-eyebrow">
<span class="eyebrow-line"></span>
<span class="eyebrow-text">Access</span>
</div>
<h2 class="section-title-jp">アクセス</h2>
</div>
<div class="access-layout fade-in">
<div class="access-info">
<div class="access-address-block">
<p class="access-label">所在地</p>
<p class="access-address">
〒273-0005<br>
千葉県船橋市本町６丁目１８‐１９<br>
第３山中ビル４０１号室
</p>
</div>
<div class="access-detail-row">
<div class="access-detail-item">
<div class="label">最寄り駅</div>
<div class="value">JR船橋駅 徒歩約5分</div>
</div>
<div class="access-detail-item">
<div class="label">フロア</div>
<div class="value">第３山中ビル 4階</div>
</div>
</div>
</div>
<div>
<iframe
class="map-embed"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3238.3!2d139.9842!3d35.6988!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60187e5a8b0f0001%3A0x1!2z5Y2X5qmL5biC6Iqi55S677yW5LiB55uu77yR77yY4oiS77yR77yZ!5e0!3m2!1sja!2sjp!4v1700000000"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="Norns合同会社 地図">
</iframe>
</div>
</div>
</div>
</section>
<!-- ========================================
CONTACT
======================================== -->
<section class="contact-section" id="contact">
<div class="contact-inner">
<div class="section-header fade-in" style="color:white;">
<div class="section-eyebrow" style="justify-content:center;">
<span class="eyebrow-line"></span>
<span class="eyebrow-text">Contact Us</span>
<span class="eyebrow-line"></span>
</div>
<h2 class="section-title-jp section-title-dark" style="text-align:center;">お問い合わせ</h2>
</div>
<p class="contact-tagline fade-in">
ご質問・ご相談・お見積りなど、<br>
お気軽にお問い合わせください。
</p>
<form class="contact-form fade-in" onsubmit="handleFormSubmit(event)">
<div class="form-row">
<div class="form-group">
<label class="form-label" for="contact-name">お名前 *</label>
<input class="form-input" id="contact-name" type="text" placeholder="山田 太郎" required>
</div>
<div class="form-group">
<label class="form-label" for="contact-company">会社名</label>
<input class="form-input" id="contact-company" type="text" placeholder="株式会社〇〇">
</div>
</div>
<div class="form-group">
<label class="form-label" for="contact-email">メールアドレス *</label>
<input class="form-input" id="contact-email" type="email" placeholder="example@mail.com" required>
</div>
<div class="form-group">
<label class="form-label" for="contact-subject">件名</label>
<input class="form-input" id="contact-subject" type="text" placeholder="お問い合わせ内容の件名">
</div>
<div class="form-group">
<label class="form-label" for="contact-message">メッセージ *</label>
<textarea class="form-textarea" id="contact-message" placeholder="お問い合わせ内容をご記入ください" required></textarea>
</div>
<div class="form-submit-wrap">
<button type="submit" class="btn-submit">
送信する
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</button>
</div>
</form>
</div>
</section>
<!-- ========================================
FOOTER
======================================== -->
<footer class="site-footer">
<div class="footer-inner">
<div class="footer-top">
<div>
<a href="#" class="footer-logo-en">Norns</a>
<span class="footer-logo-jp">Ｎｏｒｎｓ合同会社</span>
<p class="footer-tagline">
〒273-0005 千葉県船橋市本町６丁目１８‐１９<br>
第３山中ビル４０１号室
</p>
</div>
<div class="footer-nav-cols">
<div class="footer-nav-col">
<h4>Company</h4>
<ul>
<li><a href="#mission">理念</a></li>
<li><a href="#company">会社概要</a></li>
<li><a href="#access">アクセス</a></li>
</ul>
</div>
<div class="footer-nav-col">
<h4>Service</h4>
<ul>
<li><a href="#service">広告代理業</a></li>
<li><a href="#service">Web制作</a></li>
<li><a href="#service">システム開発</a></li>
<li><a href="#service">古物営業</a></li>
</ul>
</div>
<div class="footer-nav-col">
<h4>Contact</h4>
<ul>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p class="footer-copy">© 2026 Ｎｏｒｎｓ合同会社. All Rights Reserved.</p>
<p class="footer-copy" style="font-size:10px;">
<a href="#" style="margin-right:16px;">プライバシーポリシー</a>
<a href="#">特定商取引法に基づく表記</a>
</p>
</div>
</div>
</footer>
<!-- ========================================
JavaScript
======================================== -->
<script>
// ---- Menu Toggle ----
const menuToggle = document.getElementById('menu-toggle');
const siteNav = document.getElementById('site-nav');
menuToggle.addEventListener('click', () => {
siteNav.classList.toggle('open');
});
siteNav.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => siteNav.classList.remove('open'));
});
// ---- Scroll Animations ----
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
document.querySelectorAll('.fade-in, .stagger-children').forEach(el => observer.observe(el));
// ---- Header shrink on scroll ----
window.addEventListener('scroll', () => {
const header = document.getElementById('site-header');
if (window.scrollY > 60) {
header.style.height = '64px';
} else {
header.style.height = '';
}
});
// ---- Form Submit Placeholder ----
function handleFormSubmit(e) {
e.preventDefault();
const btn = e.target.querySelector('.btn-submit');
btn.textContent = '送信完了しました ✓';
btn.style.background = '#2a6e4a';
btn.style.borderColor = '#2a6e4a';
btn.style.color = 'white';
btn.disabled = true;
}
</script>
</body>
</html>