/* ========================================================================== style.css — あおば工務店 コーポレートサイト base.css（YakuHanJP）は HTML の で先に して読み込むこと ========================================================================== */ /* -------------------------------------------------------------------------- カスタムプロパティ -------------------------------------------------------------------------- */ :root { /* 色 */ --c-green: #2a5f3f; /* メイン：深い森の緑（あおば） */ --c-green-mid: #4a7c5a; /* 中間の緑 */ --c-green-light: #d4e9dc; /* 薄い緑（背景・アクセント） */ --c-cream: #faf7f0; /* 背景：温かいクリーム */ --c-beige: #ede8d8; /* やや濃いベージュ */ --c-wood: #7c5c2a; /* 木材色（差し色） */ --c-text: #242424; /* 本文テキスト */ --c-text-sub: #5c5c5c; /* サブテキスト */ --c-border: #d0cbbf; /* ボーダー */ --c-white: #ffffff; /* レイアウト */ --max-w: 1100px; --section-gap: 4.5rem; --radius: 6px; --header-h: 64px; } /* -------------------------------------------------------------------------- リセット・ベース -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { background-color: var(--c-cream); color: var(--c-text); line-height: 1.8; font-size: 1rem; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-green); text-decoration: none; } a:hover { text-decoration: underline; } ul { list-style: none; } /* -------------------------------------------------------------------------- コンテナ -------------------------------------------------------------------------- */ .container { width: min(100%, var(--max-w)); margin-inline: auto; padding-inline: 1.25rem; } /* -------------------------------------------------------------------------- プレースホルダー画像 -------------------------------------------------------------------------- */ .img-placeholder { background-color: var(--c-beige); display: flex; align-items: center; justify-content: center; color: var(--c-text-sub); font-size: 0.78rem; } .img-placeholder::after { content: "写真準備中"; } /* 実画像を入れた枠（背景画像をトリミング表示する）。img-placeholder の代わりに付ける */ .has-photo { background-size: cover; background-position: center; background-repeat: no-repeat; } /* -------------------------------------------------------------------------- ボタン -------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 0.8em 2em; border-radius: var(--radius); font-weight: 700; text-align: center; text-decoration: none; transition: background-color 0.2s, color 0.2s, opacity 0.2s; cursor: pointer; } .btn:hover { text-decoration: none; opacity: 0.88; } .btn-primary { background-color: var(--c-green); color: var(--c-white); } .btn-hero { background-color: var(--c-wood); color: var(--c-white); } .btn-large { padding: 1em 2.5em; font-size: 1.05rem; } /* -------------------------------------------------------------------------- セクション共通 -------------------------------------------------------------------------- */ .section { padding-block: var(--section-gap); } .section-title { font-size: 1.375rem; font-weight: 700; text-align: center; margin-bottom: 2.25rem; color: var(--c-green); padding-bottom: 0.75rem; position: relative; } .section-title::after { content: ""; display: block; width: 40px; height: 3px; background-color: var(--c-wood); margin: 0.5rem auto 0; } /* -------------------------------------------------------------------------- ヘッダー -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--c-white); border-bottom: 1px solid var(--c-border); height: var(--header-h); } .header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: 1.25rem; max-width: var(--max-w); margin-inline: auto; } .site-logo { font-size: 1.1rem; font-weight: 700; color: var(--c-green); text-decoration: none; letter-spacing: 0.02em; } .site-logo:hover { text-decoration: none; opacity: 0.8; } /* ハンバーガーボタン */ .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; width: 44px; height: 44px; justify-content: center; align-items: center; } .nav-toggle span { display: block; width: 24px; height: 2px; background-color: var(--c-text); transition: transform 0.22s ease, opacity 0.22s ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ナビゲーションリスト（モバイル：既定は非表示） */ .nav-list { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background-color: var(--c-white); border-bottom: 1px solid var(--c-border); padding: 0.5rem 1.25rem 1rem; flex-direction: column; } .nav-list.is-open { display: flex; } .nav-list li { border-bottom: 1px solid var(--c-beige); } .nav-list li:last-child { border-bottom: none; } .nav-list a { display: block; padding: 0.85rem 0; color: var(--c-text); font-size: 0.95rem; text-decoration: none; } .nav-list a:hover { color: var(--c-green); text-decoration: none; } .nav-cta { color: var(--c-green) !important; font-weight: 700; } /* -------------------------------------------------------------------------- ヒーロー -------------------------------------------------------------------------- */ .hero { display: flex; flex-direction: column; } .hero-image { width: 100%; aspect-ratio: 3 / 2; min-height: 220px; } .hero-body { background-color: var(--c-green); color: var(--c-white); padding: 2.5rem 0; } .hero-eyebrow { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--c-green-light); margin-bottom: 0.6rem; } .hero-catch { font-size: 1.75rem; font-weight: 700; line-height: 1.4; margin-bottom: 1rem; color: var(--c-white); } .hero-sub { font-size: 0.9rem; color: var(--c-green-light); margin-bottom: 1.75rem; line-height: 1.8; } /* -------------------------------------------------------------------------- 強み -------------------------------------------------------------------------- */ .strengths-section { background-color: var(--c-white); } .strengths-list { display: flex; flex-direction: column; gap: 2.5rem; } .strength-item { text-align: center; } .strength-icon { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1.25rem; } .strength-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--c-green); line-height: 1.5; } .strength-body { font-size: 0.875rem; color: var(--c-text-sub); max-width: 28em; margin-inline: auto; line-height: 1.75; } /* -------------------------------------------------------------------------- 施工事例 -------------------------------------------------------------------------- */ .works-section { background-color: var(--c-cream); } .works-list { display: flex; flex-direction: column; gap: 1.75rem; } .work-card { background-color: var(--c-white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); } .work-image { width: 100%; aspect-ratio: 16 / 9; } .work-body { padding: 1.25rem; } .work-tag { display: inline-block; background-color: var(--c-green-light); color: var(--c-green); font-size: 0.72rem; font-weight: 700; padding: 0.2em 0.65em; border-radius: 2px; margin-bottom: 0.5rem; letter-spacing: 0.04em; } .work-title { font-size: 0.975rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--c-text); } .work-text { font-size: 0.85rem; color: var(--c-text-sub); line-height: 1.75; } .works-note { text-align: center; margin-top: 1.75rem; font-size: 0.82rem; color: var(--c-text-sub); } /* -------------------------------------------------------------------------- お客様の声 -------------------------------------------------------------------------- */ .voices-section { background-color: var(--c-green); color: var(--c-white); } .voices-section .section-title { color: var(--c-white); } .voices-section .section-title::after { background-color: var(--c-green-light); } .voices-list { display: flex; flex-direction: column; gap: 1.25rem; } .voice-card { background-color: rgba(255, 255, 255, 0.1); border-left: 4px solid var(--c-green-light); padding: 1.25rem 1.5rem; border-radius: 0 var(--radius) var(--radius) 0; } .voice-quote p { font-size: 0.9rem; line-height: 1.85; margin-bottom: 0.75rem; } .voice-attr { display: block; font-size: 0.78rem; color: var(--c-green-light); } /* -------------------------------------------------------------------------- 会社案内 -------------------------------------------------------------------------- */ .about-section { background-color: var(--c-white); } .about-inner { display: flex; flex-direction: column; gap: 2rem; } .about-image { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius); } .about-table { width: 100%; border-collapse: collapse; } .about-table th, .about-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--c-border); font-size: 0.875rem; vertical-align: top; text-align: left; } .about-table th { width: 8em; color: var(--c-text-sub); font-weight: 500; white-space: nowrap; } .about-table a { color: var(--c-green); } /* -------------------------------------------------------------------------- お問い合わせ -------------------------------------------------------------------------- */ .contact-section { background-color: var(--c-beige); } .contact-lead { text-align: center; margin-bottom: 2.5rem; font-size: 0.925rem; line-height: 1.85; color: var(--c-text-sub); } .br-desktop { display: none; } .contact-methods { display: flex; flex-direction: column; gap: 1.5rem; } .contact-method { background-color: var(--c-white); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); } .method-label { font-size: 0.8rem; color: var(--c-text-sub); margin-bottom: 0.75rem; font-weight: 700; letter-spacing: 0.06em; } .contact-tel { display: block; font-size: 1.75rem; font-weight: 700; color: var(--c-green); letter-spacing: 0.04em; margin-bottom: 0.5rem; text-decoration: none; } /* 会社案内テーブル内の電話番号（display:block を使わないインライン版） */ .table-tel { font-weight: 700; color: var(--c-green); letter-spacing: 0.04em; } .method-note { font-size: 0.76rem; color: var(--c-text-sub); margin-top: 0.75rem; } /* -------------------------------------------------------------------------- フッター -------------------------------------------------------------------------- */ .site-footer { background-color: var(--c-green); color: var(--c-green-light); padding-block: 2.5rem; text-align: center; } .footer-logo { font-size: 1.05rem; font-weight: 700; color: var(--c-white); margin-bottom: 0.4rem; } .footer-address { font-size: 0.78rem; margin-bottom: 0.75rem; } .footer-copy { font-size: 0.72rem; color: rgba(255, 255, 255, 0.8); } /* -------------------------------------------------------------------------- レスポンシブ（タブレット 768px〜） -------------------------------------------------------------------------- */ @media (min-width: 768px) { :root { --section-gap: 6rem; } .section-title { font-size: 1.75rem; margin-bottom: 2.75rem; } /* ヘッダー */ .nav-toggle { display: none; } .nav-list { display: flex !important; position: static; border: none; padding: 0; flex-direction: row; align-items: center; gap: 0.125rem; background: transparent; } .nav-list li { border: none; } .nav-list a { padding: 0.4em 0.9em; font-size: 0.875rem; border-radius: var(--radius); color: var(--c-text); } .nav-list a:hover { background-color: var(--c-cream); color: var(--c-green); text-decoration: none; } .nav-cta { background-color: var(--c-green) !important; color: var(--c-white) !important; border-radius: var(--radius); } .nav-cta:hover { background-color: var(--c-green-mid) !important; } /* ヒーロー */ .hero { flex-direction: row; min-height: 460px; } .hero-image { width: 55%; aspect-ratio: unset; min-height: unset; } .hero-body { flex: 1; display: flex; align-items: center; padding: 3rem 0; } .hero-catch { font-size: 2.125rem; } .hero-sub { font-size: 0.95rem; } /* 強み */ .strengths-list { flex-direction: row; align-items: flex-start; gap: 2rem; } .strength-item { flex: 1; } /* 施工事例 */ .works-list { flex-direction: row; flex-wrap: wrap; gap: 1.5rem; } .work-card { flex: 1 1 calc(33.33% - 1rem); min-width: 220px; } /* お客様の声 */ .voices-list { flex-direction: row; align-items: stretch; gap: 1.25rem; } .voice-card { flex: 1; } /* 会社案内 */ .about-inner { flex-direction: row; align-items: flex-start; gap: 3rem; } .about-image { width: 42%; flex-shrink: 0; aspect-ratio: 4 / 3; } .about-info { flex: 1; } /* お問い合わせ */ .br-desktop { display: inline; } .contact-methods { flex-direction: row; align-items: stretch; gap: 2rem; } .contact-method { flex: 1; } } /* -------------------------------------------------------------------------- レスポンシブ（デスクトップ 1024px〜） -------------------------------------------------------------------------- */ @media (min-width: 1024px) { :root { --section-gap: 7rem; } .hero { min-height: 540px; } .hero-catch { font-size: 2.625rem; } .hero-sub { font-size: 1rem; } } /* -------------------------------------------------------------------------- 下層ページ共通ページヘッダー -------------------------------------------------------------------------- */ .page-header { background-color: var(--c-green); color: var(--c-white); padding: 2.75rem 0 2.5rem; text-align: center; } .page-header h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.5rem; color: var(--c-white); } .page-header-sub { font-size: 0.82rem; color: var(--c-green-light); } .page-header-sub ol { list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0; } .page-header-sub li + li::before { content: " › "; padding: 0 0.2em; } .page-header-sub a { color: var(--c-green-light); text-decoration: underline; } .page-header-sub a:hover { text-decoration: none; } /* ナビ：現在ページ表示 */ .nav-list a[aria-current="page"] { color: var(--c-green); font-weight: 700; } @media (min-width: 768px) { .nav-list a[aria-current="page"]:not(.nav-cta) { background-color: var(--c-green-light); } } /* -------------------------------------------------------------------------- 会社案内 — 沿革 -------------------------------------------------------------------------- */ .history-section { background-color: var(--c-cream); } .history-list { max-width: 700px; margin-inline: auto; } .history-item { display: grid; grid-template-columns: 5em 1fr; gap: 0 1.5rem; padding: 1rem 0; border-bottom: 1px solid var(--c-border); } .history-item:first-child { border-top: 1px solid var(--c-border); } .history-year { font-weight: 700; color: var(--c-green); font-size: 0.925rem; padding-top: 0.15em; } .history-text { font-size: 0.875rem; line-height: 1.75; color: var(--c-text); } /* -------------------------------------------------------------------------- 会社案内 — スタッフ紹介 -------------------------------------------------------------------------- */ .staff-section { background-color: var(--c-white); } .staff-list { display: flex; flex-direction: column; gap: 2rem; max-width: 700px; margin-inline: auto; } .staff-card { display: flex; gap: 1.5rem; align-items: flex-start; } .staff-photo { width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0; } .staff-name { font-size: 1.05rem; font-weight: 700; color: var(--c-green); margin-bottom: 0.2rem; } .staff-role { font-size: 0.78rem; color: var(--c-text-sub); margin-bottom: 0.5rem; font-weight: 500; } .staff-bio { font-size: 0.85rem; color: var(--c-text-sub); line-height: 1.75; } /* -------------------------------------------------------------------------- 会社案内 — アクセス -------------------------------------------------------------------------- */ .access-section { background-color: var(--c-beige); } .map-placeholder { width: 100%; height: 220px; background-color: var(--c-beige); border: 2px dashed var(--c-border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--c-text-sub); font-size: 0.85rem; margin-bottom: 1.5rem; } .access-info { font-size: 0.875rem; line-height: 2.25; color: var(--c-text); max-width: 400px; } /* -------------------------------------------------------------------------- お問い合わせフォーム（contact.html） -------------------------------------------------------------------------- */ .contact-form-section { background-color: var(--c-white); } .contact-form { max-width: 640px; margin-inline: auto; } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.875rem; font-weight: 700; color: var(--c-text); margin-bottom: 0.5rem; } .form-badge { display: inline-block; font-size: 0.68rem; padding: 0.1em 0.55em; border-radius: 2px; margin-left: 0.4em; vertical-align: middle; font-weight: 700; line-height: 1.6; } .form-required { background-color: var(--c-green); color: var(--c-white); } .form-optional { background-color: var(--c-beige); color: var(--c-text-sub); font-weight: 500; } .form-input, .form-select, .form-textarea { display: block; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); font-family: var(--font-jp); font-size: 1rem; color: var(--c-text); background-color: var(--c-white); transition: border-color 0.2s, box-shadow 0.2s; -webkit-appearance: none; appearance: none; } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c5c5c' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: 2px solid var(--c-green-mid); outline-offset: 2px; border-color: var(--c-green-mid); box-shadow: 0 0 0 3px rgba(74, 124, 90, 0.15); } .form-textarea { min-height: 160px; resize: vertical; line-height: 1.75; } .form-note { font-size: 0.76rem; color: var(--c-text-sub); margin-top: 0.4rem; } .form-submit-wrap { text-align: center; margin-top: 2.5rem; } .form-demo-note { text-align: center; font-size: 0.82rem; color: var(--c-text-sub); margin-top: 1.25rem; padding: 0.75rem 1.25rem; background-color: var(--c-beige); border-radius: var(--radius); } .form-sent-message { display: none; text-align: center; padding: 3rem 1.5rem; background-color: var(--c-green-light); border-radius: var(--radius); } .form-sent-message h2 { color: var(--c-green); margin-bottom: 1rem; font-size: 1.25rem; } .form-sent-message p { color: var(--c-text-sub); font-size: 0.9rem; } /* 「トップへ戻る」リンク（2つ目の段落）だけ上に余白を入れる */ .form-sent-message p + p { margin-top: 1rem; }