/* ============================================================ AMBER CORE - Corporate Site Styles ============================================================ ★★★ このファイルは２つのゾーンに分かれています ★★★ 【編集ゾーン】(この直下) ここだけを編集すれば、サイト全体の色・フォント・幅を 変更できます。編集後はブラウザで Ctrl+Shift+R で再読込。 【システムゾーン】(この下のすべてのブロック) レイアウトの実装。触ると崩れる可能性があります。 ============================================================ */ /* ============================================================ ★ 編集ゾーン：ここを触ればサイト全体が変わる ★ ============================================================ */ :root { /* ---- ブランドカラー ---- */ --color-amber: #E27D24; /* メインのオレンジ（暗背景で映えるよう明度UP） */ --color-amber-deep: #CC6600; /* オレンジの濃い版（ボタン hover 等） */ --color-amber-light: #F0982E; /* オレンジの明るい版 */ --color-dark: #382125; /* ブランドダークブラウン（面・アクセント用） */ --color-blue: #B6C3D1; /* ライトブルー（アクセント・公式） */ --color-gold: #E8A33D; /* ゴールド（差し色） */ /* ---- 背景・文字色（ダークテーマ） ---- */ --color-bg: #1B1012; /* 標準背景色（深いダークブラウン） */ --color-bg-alt: #251618; /* サブ背景色（少し明るいダーク） */ --color-text: #EBE6D0; /* 本文の文字色（クリーム＝ベージュ） */ --color-text-muted: #A89987; /* 補足文の色 */ --color-line: rgba(235, 230, 208, 0.14); /* 罫線・区切り線 */ --color-white: #FFFFFF; /* ---- フォント ---- */ /* 変更する場合は Google Fonts のフォント名を入れる。 各 HTML ファイル の link href も合わせて更新すること */ --font-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; --font-en: 'Cormorant Garamond', 'Times New Roman', serif; --font-display: 'Cormorant Garamond', 'Noto Serif JP', serif; /* ---- レイアウト ---- */ --maxw: 1240px; /* コンテンツ最大幅 */ --gutter: clamp(24px, 5vw, 80px); /* 左右余白 */ --header-h: 80px; /* ヘッダーの高さ */ /* ---- 内部で使う色（通常触らなくてOK） ---- */ --color-dark-soft: #382125; --color-yellow: #F5C56B; } /* ============================================================ ★ 編集ゾーンここまで ★ 以下はレイアウト実装（触らない） ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-jp); color: var(--color-text); background: var(--color-bg); line-height: 1.8; font-weight: 400; letter-spacing: 0.04em; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: opacity 0.3s ease; } a:hover { opacity: 0.7; } ul { list-style: none; } /* ======================================== Header ======================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-h); background: rgba(27, 16, 18, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 100; border-bottom: 1px solid transparent; transition: border-color 0.3s ease, background 0.3s ease; } .site-header.scrolled { background: rgba(27, 16, 18, 0.9); } .site-header.scrolled { border-bottom-color: var(--color-line); } .header-inner { max-width: var(--maxw); height: 100%; margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; } .logo { display: flex; align-items: center; gap: 12px; height: 56px; } .logo-mark { height: 44px; width: auto; } .logo-text { font-family: var(--font-en); font-size: 18px; letter-spacing: 0.32em; color: var(--color-text); font-weight: 400; } .nav-list { display: flex; gap: clamp(20px, 3.5vw, 48px); align-items: center; } .nav-list a { font-size: 13px; letter-spacing: 0.16em; color: var(--color-text); position: relative; padding: 8px 0; } .nav-list a.active::after, .nav-list a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-amber); } .nav-list a:hover { opacity: 1; } .nav-list .nav-contact { background: var(--color-amber); color: var(--color-white); padding: 10px 20px; border-radius: 2px; letter-spacing: 0.12em; } .nav-list .nav-contact:hover { background: var(--color-amber-deep); opacity: 1; } .nav-list .nav-contact::after { display: none; } .menu-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; } /* ======================================== Hero ======================================== */ .hero { position: relative; min-height: 100vh; padding-top: var(--header-h); display: flex; align-items: center; overflow: hidden; background: radial-gradient(ellipse at 70% 40%, rgba(226, 125, 36, 0.18), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(232, 163, 61, 0.10), transparent 55%), linear-gradient(135deg, #1B1012 0%, #2B1A1D 100%); } .hero::before { content: ""; position: absolute; top: 15%; right: -10%; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; background: radial-gradient(circle, rgba(226, 125, 36, 0.35) 0%, transparent 60%); filter: blur(50px); z-index: 0; } .hero::after { content: ""; position: absolute; bottom: -12%; left: -5%; width: 50vw; height: 50vw; max-width: 620px; max-height: 620px; background: radial-gradient(circle, rgba(232, 163, 61, 0.15) 0%, transparent 65%); filter: blur(60px); z-index: 0; } .hero-inner { position: relative; z-index: 1; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: center; } .hero-copy { max-width: 600px; } .hero-tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: 13px; letter-spacing: 0.32em; color: var(--color-amber); margin-bottom: 28px; } .hero-tag::before { content: ""; width: 40px; height: 1px; background: var(--color-amber); } .hero-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 60px); font-weight: 400; line-height: 1.35; color: var(--color-text); margin-bottom: 32px; letter-spacing: 0.02em; } .hero-title .accent { color: var(--color-amber); } .hero-title .small { display: block; font-size: 0.6em; margin-top: 8px; letter-spacing: 0.18em; color: var(--color-text-muted); } .hero-lead { font-size: 16px; color: var(--color-text-muted); line-height: 2; margin-bottom: 40px; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; } .hero-visual { position: relative; aspect-ratio: 1; max-width: 480px; margin-left: auto; } .hero-crystal { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 40px rgba(226, 125, 36, 0.55)) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5)); } /* ======================================== Buttons ======================================== */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; font-size: 13px; letter-spacing: 0.18em; border: 1px solid transparent; cursor: pointer; transition: all 0.3s ease; border-radius: 2px; font-family: inherit; } .btn-primary { background: var(--color-amber); color: var(--color-white); } .btn-primary:hover { background: var(--color-amber-deep); opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(226, 125, 36, 0.35); } .btn-ghost { background: transparent; border-color: var(--color-text); color: var(--color-text); } .btn-ghost:hover { background: var(--color-text); color: var(--color-dark); opacity: 1; } .btn .arrow { transition: transform 0.3s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ======================================== Section ======================================== */ .section { padding: clamp(80px, 12vw, 160px) 0; position: relative; } .section-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .section-bg-dark { background: radial-gradient(ellipse at 80% 20%, rgba(226, 125, 36, 0.08), transparent 55%), #0F0709; } .section-bg-alt { background: var(--color-bg-alt); } .section-head { text-align: center; margin-bottom: 80px; } .section-eyebrow { display: inline-block; font-family: var(--font-en); font-size: 13px; letter-spacing: 0.4em; color: var(--color-amber); margin-bottom: 20px; position: relative; padding: 0 30px; } .section-eyebrow::before, .section-eyebrow::after { content: ""; position: absolute; top: 50%; width: 20px; height: 1px; background: var(--color-amber); } .section-eyebrow::before { left: 0; } .section-eyebrow::after { right: 0; } /* 左寄せ版：左側の短い線を消す */ .section-eyebrow--start { padding-left: 0; } .section-eyebrow--start::before { display: none; } .section-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 400; letter-spacing: 0.06em; color: var(--color-text); line-height: 1.4; } .section-bg-dark .section-eyebrow { color: var(--color-gold); } .section-bg-dark .section-eyebrow::before, .section-bg-dark .section-eyebrow::after { background: var(--color-gold); } .section-lead { margin-top: 24px; font-size: 15px; color: var(--color-text-muted); max-width: 700px; margin-left: auto; margin-right: auto; } /* ======================================== About preview (Top) ======================================== */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } /* ---- 会社ロゴ表示ボックス（琥珀風の背景） ---- */ .about-image { aspect-ratio: 1 / 1; max-width: 380px; margin: 0 auto; padding: 40px; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; /* 複数のオレンジ・ゴールドを重ねて本物の琥珀のような色合いを表現 */ background: radial-gradient(ellipse at 22% 20%, rgba(255, 216, 120, 0.95) 0%, transparent 45%), radial-gradient(ellipse at 78% 30%, rgba(240, 152, 46, 0.85) 0%, transparent 50%), radial-gradient(ellipse at 60% 78%, rgba(107, 46, 12, 0.75) 0%, transparent 55%), radial-gradient(ellipse at 25% 85%, rgba(226, 125, 36, 0.9) 0%, transparent 50%), linear-gradient(135deg, #F5B454 0%, #CC6600 45%, #8B3A0C 100%); border: 1px solid rgba(107, 46, 12, 0.35); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(226, 125, 36, 0.35), inset 0 2px 8px rgba(255, 220, 140, 0.4); } .about-image::after { /* 琥珀内部の光沢感を演出する装飾罫 */ content: ""; position: absolute; inset: 14px; border: 1px solid rgba(255, 220, 140, 0.35); border-radius: 3px; pointer-events: none; } .about-image-deco { display: none; } .about-image-mark { width: 74%; height: auto; display: block; position: relative; z-index: 1; /* ロゴ色は SVG のグラデーションで背景に応じた濃淡に変化 */ filter: drop-shadow(0 3px 8px rgba(56, 20, 8, 0.4)); } .about-body h3 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 400; letter-spacing: 0.04em; margin-bottom: 28px; line-height: 1.5; } .about-body p { color: var(--color-text-muted); margin-bottom: 20px; font-size: 15px; } .about-body .more-link { margin-top: 32px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: 13px; letter-spacing: 0.24em; color: var(--color-amber); padding-bottom: 6px; border-bottom: 1px solid var(--color-amber); } .about-body .more-link:hover { gap: 18px; opacity: 1; } /* ======================================== Business preview (Top) ======================================== */ .business-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .business-card { background: rgba(235, 230, 208, 0.04); border: 1px solid rgba(226, 125, 36, 0.22); padding: 48px 36px; border-radius: 4px; transition: all 0.4s ease; position: relative; overflow: hidden; backdrop-filter: blur(4px); } .business-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--color-amber), var(--color-gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .business-card:hover::before { transform: scaleX(1); } .business-card:hover { background: rgba(235, 230, 208, 0.07); border-color: rgba(226, 125, 36, 0.5); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35); } .business-card-num { font-family: var(--font-en); font-size: 14px; letter-spacing: 0.3em; color: var(--color-gold); margin-bottom: 24px; } .business-card-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; margin-bottom: 16px; letter-spacing: 0.04em; } .business-card-en { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.24em; color: var(--color-gold); margin-bottom: 20px; display: block; } .business-card-text { color: rgba(235, 230, 208, 0.72); font-size: 14px; line-height: 1.9; } /* ======================================== CTA banner ======================================== */ .cta { background: linear-gradient(135deg, var(--color-amber-deep) 0%, var(--color-amber) 100%); padding: 80px var(--gutter); text-align: center; color: var(--color-white); position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(245, 197, 107, 0.3), transparent 60%); } .cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .cta h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 36px); font-weight: 400; margin-bottom: 20px; letter-spacing: 0.04em; } .cta p { font-size: 15px; opacity: 0.92; margin-bottom: 36px; } .cta .btn-primary { background: var(--color-white); color: var(--color-amber-deep); } .cta .btn-primary:hover { background: var(--color-dark); color: var(--color-white); } /* ======================================== Page hero (sub pages) ======================================== */ .page-hero { padding: calc(var(--header-h) + 120px) 0 100px; background: radial-gradient(ellipse at 70% 30%, rgba(226, 125, 36, 0.15), transparent 60%), linear-gradient(135deg, #1B1012 0%, #2A1A1D 100%); position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; top: 20%; right: -8%; width: 40vw; height: 40vw; max-width: 500px; max-height: 500px; background: radial-gradient(circle, rgba(226, 125, 36, 0.28), transparent 65%); filter: blur(50px); } .page-hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; } .breadcrumb { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.2em; color: var(--color-text-muted); margin-bottom: 32px; } .breadcrumb a:hover { color: var(--color-amber); opacity: 1; } .breadcrumb .sep { margin: 0 12px; color: var(--color-amber); } .page-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 5.5vw, 64px); font-weight: 400; color: var(--color-text); letter-spacing: 0.02em; line-height: 1.3; } .page-hero-en { font-family: var(--font-en); font-size: 14px; letter-spacing: 0.4em; color: var(--color-amber); margin-bottom: 16px; } .page-hero-lead { margin-top: 28px; font-size: 15px; color: var(--color-text-muted); max-width: 720px; line-height: 2; } /* ======================================== Info table (About) ======================================== */ .info-table { width: 100%; border-collapse: collapse; max-width: 880px; margin: 0 auto; } .info-table th, .info-table td { text-align: left; padding: 28px 24px; border-bottom: 1px solid var(--color-line); font-size: 15px; } .info-table th { width: 220px; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.08em; color: var(--color-text); vertical-align: top; } .info-table td { color: var(--color-text-muted); } .info-table th .en { display: block; font-family: var(--font-en); font-size: 11px; letter-spacing: 0.24em; color: var(--color-amber); margin-top: 4px; font-weight: 400; } /* ======================================== Mission box ======================================== */ .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; margin-bottom: 80px; } .mission-eyebrow { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.32em; color: var(--color-amber); margin-bottom: 20px; } .mission-title { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); font-weight: 400; letter-spacing: 0.04em; color: var(--color-text); line-height: 1.5; } .mission-body p { color: var(--color-text-muted); margin-bottom: 20px; font-size: 15px; } /* ======================================== Business detail (Business page) ======================================== */ .biz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 120px; } .biz-row:last-child { margin-bottom: 0; } .biz-row.reverse { direction: rtl; } .biz-row.reverse > * { direction: ltr; } .biz-row-num { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.4em; color: var(--color-amber); margin-bottom: 20px; } .biz-row h3 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 400; letter-spacing: 0.04em; margin-bottom: 16px; line-height: 1.5; } .biz-row .en-sub { font-family: var(--font-en); font-size: 13px; letter-spacing: 0.24em; color: var(--color-text-muted); margin-bottom: 28px; } .biz-row p { color: var(--color-text-muted); font-size: 15px; margin-bottom: 16px; } .biz-row ul.bullet { margin-top: 24px; } .biz-row ul.bullet li { padding-left: 24px; position: relative; font-size: 14px; color: var(--color-text); margin-bottom: 10px; opacity: 0.9; } .biz-row ul.bullet li::before { content: ""; position: absolute; left: 0; top: 14px; width: 12px; height: 1px; background: var(--color-amber); } .biz-visual { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--color-bg-alt), var(--color-bg)); border-radius: 4px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 30px rgba(226, 125, 36, 0.12); } .biz-visual svg { width: 60%; height: 60%; } .biz-visual.v1 { background: linear-gradient(135deg, #E8A33D 0%, #CC6600 100%); } .biz-visual.v2 { background: linear-gradient(135deg, #382125 0%, #5C3A3E 100%); color: var(--color-bg); } .biz-visual.v3 { background: linear-gradient(135deg, #B6C3D1 0%, #5C7591 100%); } .biz-visual-icon { width: 120px; height: 120px; opacity: 0.85; } /* ======================================== Contact form ======================================== */ .contact-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; max-width: 1100px; margin: 0 auto; } .contact-info h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; letter-spacing: 0.04em; margin-bottom: 8px; } .contact-info .en { font-family: var(--font-en); font-size: 12px; letter-spacing: 0.24em; color: var(--color-amber); margin-bottom: 32px; display: block; } .contact-info p { color: var(--color-text-muted); font-size: 14px; margin-bottom: 24px; } .contact-info dl { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--color-line); } .contact-info dt { font-family: var(--font-en); font-size: 11px; letter-spacing: 0.24em; color: var(--color-amber); margin-bottom: 6px; } .contact-info dd { margin-bottom: 20px; font-size: 15px; } .form-group { margin-bottom: 28px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .form-label { display: block; font-size: 13px; letter-spacing: 0.12em; color: var(--color-text); margin-bottom: 10px; font-weight: 500; } .form-label .req { display: inline-block; font-size: 10px; background: var(--color-amber); color: var(--color-white); padding: 2px 8px; border-radius: 2px; margin-left: 8px; letter-spacing: 0.1em; vertical-align: middle; } .form-control { width: 100%; padding: 14px 16px; background: rgba(235, 230, 208, 0.06); border: 1px solid var(--color-line); border-radius: 2px; font-family: inherit; font-size: 15px; color: var(--color-text); transition: border-color 0.3s ease, background 0.3s ease; letter-spacing: 0.04em; } .form-control::placeholder { color: var(--color-text-muted); opacity: 0.6; } .form-control:focus { outline: none; border-color: var(--color-amber); background: rgba(235, 230, 208, 0.09); box-shadow: 0 0 0 3px rgba(226, 125, 36, 0.15); } /*