/* css/top-style.css */ /* --- フォント設定 --- */ /* Google Fonts Zen Kaku Gothic New は index.html の で読み込まれているため、@font-face は不要 */ :root { --primary-bg-color: #FFFFFF; /* 白 */ --secondary-bg-color: #F8F8F8; /* 少しグレーがかった白 */ --text-color: #1A1A1A; /* 黒 */ --light-text-color: #666666; /* 薄い黒 */ --accent-color: #000000; /* アクセントカラーを黒に */ --border-color: #E0E0E0; /* 薄いボーダー色 */ --cta-button-bg: #1A1A1A; /* CTAボタンの背景色 */ --cta-button-text: #FFFFFF; /* CTAボタンの文字色 */ --highlight-text-color: #666666; /* 強調したい文字色 */ } body { margin: 0; font-family: "M PLUS Rounded 1c", sans-serif; /* Google Fontsで読み込んだフォント名 */ color: var(--text-color); background-color: var(--primary-bg-color); line-height: 1.6; overflow-x: hidden; scroll-behavior: smooth; /* スムーズスクロール */ } a { color: var(--text-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--light-text-color); } h1, h2, h3, h4, h5, h6 { font-weight: normal; /* 全体のフォントをノーマルウェイトに */ color: var(--accent-color); margin-top: 0; margin-bottom: 20px; } p { margin-bottom: 15px; } ul { list-style: none; padding: 0; margin: 0; } li { margin-bottom: 10px; } button { font-family: 'WDXL Lubrifont JP N', sans-serif; cursor: pointer; border: none; padding: 12px 25px; border-radius: 5px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } button:hover:not(:disabled) { transform: translateY(-2px); } button.disabled { opacity: 0.5; cursor: not-allowed; } /* --- 背景アニメーション (既存サイトから継承) --- */ #background-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -2; /* コンテンツの下に配置 */ filter: brightness(100%); /* 明るさはそのまま */ } #background-container .background-image { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 3s ease-in-out; /* 3秒フェード */ } /* --- 粒子エフェクト用キャンバス --- */ #particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* 背景画像の上、コンテンツの下 */ pointer-events: none; /* クリックイベントを透過させる */ } /* --- ヘッダーの調整 --- */ #main-header-top { display: flex; justify-content: space-between; /* ロゴとメニューを左右に */ align-items: center; padding: 0px 0px; /* パディングを調整 */ background-color: #FFFFFF !important; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .header-logo-top img { /* ロゴ画像用 */ height: 100px; /* ロゴの高さ調整 */ transition: transform 0.2s ease; margin: 5px 0px 0px 5px; } .header-logo-top img:hover { transform: translateY(-2px); } .top-nav { /* PC用ナビゲーション */ display: flex; align-items: center; padding:10px 30px 10px 10px ; } .top-menu-list { /* PC用メニュー */ display: flex; list-style: none; padding: 0; margin: 0; } .top-menu-list li { margin-left: 30px; } .top-menu-list li a { font-size: 0.7em; font-weight: 100; color: #444; transition: color 0.3s ease; } .top-menu-list li a:hover { color: #888; } /* ハンバーガーメニューアイコン (PCでは非表示) */ .hamburger-menu-top { display: none; /* PCでは非表示 */ width: 30px; height: 25px; flex-direction: column; justify-content: space-between; cursor: pointer; z-index: 200; } .hamburger-menu-top span { display: block; width: 100%; height: 3px; background-color: var(--text-color); transition: all 0.3s ease; } .hamburger-menu-top.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger-menu-top.open span:nth-child(2) { opacity: 0; } .hamburger-menu-top.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* サイドバーメニュー (PCでは非表示) */ .sidebar-menu-top { position: fixed; top: 0; right: -300px; /* 初期状態は隠す */ width: 300px; height: 100%; background-color: var(--accent-color); /* 黒背景 */ padding-top: 80px; transition: right 0.4s ease; z-index: 150; overflow-y: auto; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.7); color: var(--primary-bg-color); /* 白文字 */ } .sidebar-menu-top.open { right: 0; } .sidebar-menu-top ul { list-style: none; padding: 0 20px; } .sidebar-menu-top ul li { margin-bottom: 10px; } .sidebar-menu-top ul li a { color: var(--primary-bg-color); /* 白文字 */ text-decoration: none; font-size: 1.2em; display: block; padding: 8px 0; transition: color 0.3s ease; } .sidebar-menu-top ul li a:hover { color: var(--light-text-color); /* ホバーで少しグレーに */ } /* スクロール禁止 */ body.no-scroll { overflow: hidden; } /* --- メインコンテンツブロック --- */ .top-main-content { max-width: 900px; /* ミニマルな中央寄せ */ margin: 0 auto; padding: 20px; /* 全体のパディング */ } .content-block { background-color: var(--primary-bg-color); /* 背景色を白に */ padding: 50px 30px; margin-bottom: 50px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03); /* 軽い影 */ border: 1px solid var(--border-color); /* 薄い枠線 */ } /* --- メインビジュアル (Hero) --- */ .hero-section { position: relative; height: 80vh; /* 画面の高さの80% */ display: flex; justify-content: center; align-items: center; text-align: center; color: var(--text-color); overflow: hidden; margin: 20px 10px 10px 10px ; padding: 60px 0px 60px 0px ; border-radius: 10px; background-image: url('../images/top-page-content/main-visual-bg.webp'); /* 抽象的な背景画像 */ opacity: 0.7; /* 不透明度調整 */ background-size: cover; background-position: center; background-repeat: no-repeat; filter: brightness(100%); } .hero-content { position: relative; z-index: 10; padding: 60px; /* パディング調整 */ border-radius: 0px; /* 角丸調整 */ /* 背景色と影はそのまま */ } .main-catchphrase { font-family: 'WDXL Lubrifont JP N', sans-serif; font-size: 3.5em; font-weight: bold; margin-bottom: 30px; color: var(--accent-color); text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); } .cta-button { background-color: var(--cta-button-bg); color: var(--cta-button-text); font-size: 1.2em; padding: 15px 40px; border-radius: 50px; } .cta-button:hover { background-color: var(--light-text-color); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } /* --- 自己紹介 --- */ .about-me-section { display: flex; align-items: center; gap: 50px; } .about-me-text { flex: 1; } .about-me-section h2 { font-size: 2em; margin-bottom: 25px; } .about-me-section p { font-size: 1.1em; line-height: 1.8; } .about-me-image { flex: 0 0 300px; width: 300px; height: 300px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 15px rgba(0, 0, 0, 0.05); border: 1px solid var(--border-color); } .about-me-image img { width: 100%; height: 100%; object-fit: cover; } /* --- サービス / 提供価値 (新しい2カラムレイアウト) --- */ .services-fullwidth-section { width: 100%; margin-bottom: 50px; background-color: transparent; padding: 0; box-shadow: none; border: none; } .services-fullwidth-section .section-title { /* 提供価値のh2 */ font-size: 2em; text-align: center; margin-bottom: 40px; padding: 20px; background-color: rgba(255,255,255,0.8); /* 添付の1.5は無効なので0.8に */ border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); border-radius: 10px; max-width: 900px; margin: 0 auto 50px auto; opacity: 0.8; } .service-row-container { display: flex; flex-direction: column; width: 100%; max-width: 1200px; /* フルスクリーン時の最大幅 */ margin: 0 auto; } .service-row { display: flex; align-items: stretch; width: 100%; min-height: 250px; margin-bottom: 20px; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); transition: transform 1s ease-in-out, box-shadow 0.5s ease-in-out; text-decoration: none; color: inherit; position: relative; cursor: pointer; } .service-row:nth-child(even) { /* 偶数番目の行を左右反転 */ flex-direction: row-reverse; } /* ホバーエフェクト */ .service-row:hover { transform: scale(1.03); /* 120%拡大は大きすぎるので103%に調整 */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } /* ホバー時に背景画像とテキストカラムがさらに拡大しないようにする */ .service-row:hover .service-left-col, .service-row:hover .service-right-col { transform: scale(1); } .service-left-col, .service-right-col { flex: 1; /* 左右のカラムを均等幅に */ padding: 30px; display: flex; flex-direction: column; justify-content: center; transition: background-color 0.5s ease; } .service-left-col { background-color: var(--accent-color); /* 左カラムの背景色を黒に */ color: var(--primary-bg-color); /* 左カラムの文字色を白に */ position: relative; overflow: hidden; text-align: center; } .service-left-col::before { /* 背景画像 */ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.8; /* 背景画像の透明度 */ filter: brightness(200%); /* 明るさ調整 - ここを200%に戻します */ transition: transform 1s ease; } /* 各背景画像 (images/top-page-content/ に格納) */ .bg-img-1::before { background-image: url('../images/top-page-content/1.webp'); } .bg-img-2::before { background-image: url('../images/top-page-content/2.webp'); } .bg-img-3::before { background-image: url('../images/top-page-content/3.webp'); } .bg-img-4::before { background-image: url('../images/top-page-content/4.webp'); } .bg-img-5::before { background-image: url('../images/top-page-content/5.webp'); } .bg-img-6::before { background-image: url('../images/top-page-content/6.webp'); } .bg-img-7::before { background-image: url('../images/top-page-content/7.webp'); } .bg-img-8::before { background-image: url('../images/top-page-content/8.webp'); } .service-title { font-size: 2em; font-weight: bold; color: var(--primary-bg-color); /* タイトル色を白に */ z-index: 1; /* 背景画像より手前に */ position: relative; text-shadow: 0 0 10px rgba(0,0,0,0.5); /* 読みやすく影 */ } .service-right-col { background-color: var(--primary-bg-color); /* 右カラムの背景色を白に */ color: var(--text-color); /* 右カラムの文字色を黒に */ padding: 30px 40px; /* パディング調整 */ line-height: 1.8; font-size: 1.05em; opacity: 0.9; /* 不透明度調整 */ } .service-description { font-size: 1.05em; line-height: 1.7; color: var(--text-color); } /* Coming Soon バッジ */ .coming-soon-badge { position: absolute; top: 20px; right: 20px; background-color: rgba(255, 0, 0, 0.7); color: var(--primary-bg-color); padding: 8px 15px; border-radius: 5px; font-weight: bold; font-size: 0.9em; z-index: 20; pointer-events: none; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } /* 無料 バッジ */ .free-badge { position: absolute; bottom: 10px; right: 20px; background-color: rgba(0, 100, 200, 0.6); color: var(--primary-bg-color); padding: 8px 15px; border-radius: 5px; font-weight: bold; font-size: 0.9em; z-index: 20; pointer-events: none; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } .service-row.coming-soon { opacity: 0.7; cursor: not-allowed; } .service-row.coming-soon:hover { transform: scale(1); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); } /* --- お問い合わせ --- */ .contact-section h2 { font-size: 2em; text-align: center; margin-bottom: 25px; } .contact-section p { text-align: center; font-size: 1.1em; margin-bottom: 30px; } .contact-form { display: flex; flex-direction: column; gap: 15px; max-width: 500px; margin: 0 auto 30px auto; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { padding: 12px; border: 1px solid var(--border-color); border-radius: 5px; font-family: 'WDXL Lubrifont JP N', sans-serif; font-size: 1em; color: var(--text-color); background-color: var(--secondary-bg-color); transition: border-color 0.3s ease; } .contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus { border-color: var(--accent-color); outline: none; } .contact-form textarea { resize: vertical; } .contact-form .submit-button { background-color: var(--accent-color); color: var(--primary-bg-color); font-size: 1.1em; padding: 15px 30px; border-radius: 50px; width: fit-content; align-self: center; } .contact-form .submit-button:hover { background-color: var(--light-text-color); } .social-links-contact { text-align: center; margin-top: 30px; } .social-links-contact a { font-size: 2.5em; margin: 0 15px; color: var(--accent-color); transition: transform 0.2s ease, color 0.3s ease; } .social-links-contact a:hover { transform: translateY(-3px); color: var(--light-text-color); } /* --- フッター --- */ #main-footer-top { text-align: center; padding: 30px 20px; background-color: #F8F8F8 !important; border-top: 1px solid var(--border-color); color: var(--light-text-color); font-size: 0.7em; } /* --- スクロールフェードインアニメーション (既存サイトから継承) --- */ .fade-in-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } .fade-in-on-scroll.is-visible { opacity: 1; transform: translateY(0); }