/* --- style.css: サイト全体のデザインルール --- */ * { box-sizing: border-box; } /* ページ全体の設定 */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; background-color: #ffffff; /* ⭐⭐ 修正後: 背景色を白（#ffffff）に変更 ⭐⭐ */ color: #333; margin: 0; padding: 0; overflow-x: hidden; /* 横方向のはみ出しを禁止する（これでズレが直ります！） */ } .container { width: 95%; /* 画面の横幅いっぱいではなく、少しゆとりを持たせる */ max-width: 600px; /* パソコンで見ても広がりすぎないようにする */ margin-left: auto; /* 左側の余白を自動で調整して、真ん中に持ってくる */ margin-right: auto; /* 右側の余白も自動で調整する */ padding: 20px; /* 中身が端っこにくっつかないようにする */ box-sizing: border-box; /* 枠線の太さを含めてサイズを計算する（ズレ防止） */ } /* サイトのロゴと見出し */ /* サイトのロゴと見出し */ .header-logo { display: flex; /* ←これは残す */ align-items: center; /* ←これは残す */ /* justify-content: center; ←これを削除する */ margin-bottom: 25px; /* ←これは残す */ border-bottom: 4px solid #ff7f00; /* ←これは残す */ padding-bottom: 15px; /* ←これは残す */ /* ⭐⭐ NEW: 中央に配置するための設定を追加します ⭐⭐ */ display: block; text-align: center; }.header-logo img { width: 300px; height: 300px; margin-right: 15px; } /* ロゴの文字（DACHSHUND）や、広告ページの大きな見出しh1の設定 */ /* ロゴの文字（DACHSHUND）や、広告ページの大きな見出しh1の設定 */ .header-logo h1 { font-family: Arial, sans-serif; color: #000000; /* ⭐⭐ 修正箇所: 強制的にサイズを4emに設定します ⭐⭐ */ /* 以前のサイズに戻したい場合、この数値を調整してください。 */ font-size: 1.5em !important; margin: 0; font-weight: 800; letter-spacing: 5px; text-transform: uppercase; text-shadow: none !important; animation: heartbeat 3s infinite; } /* 入力フォームとボタンの設定 */ input[type="url"] { width: 70%; padding: 12px 15px; margin: 15px 0; border: 2px solid #ff7f00; border-radius: 8px; font-size: 16px; } button[type="submit"], button[type="button"] { padding: 12px 25px; background-color: #ff7f00; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 15px; /* ← ここに追記/修正してください */ } /* 結果表示ボックス */ .result-box { margin-top: 25px; padding: 20px; background-color: #fff0f5; border: 1px solid #ff7f00; border-radius: 10px; font-size: 1.1em; } .result-box a { color: #dc3545; font-weight: bold; text-decoration: none; } /* --- 広告ページ ad_page.html のデザイン --- */ /* 広告を入れる箱 */ .ad-container { padding: 20px; margin: 25px auto; max-width: 600px; /* ⭐⭐ 修正後: 背景色を透明にして削除します ⭐⭐ */ background-color: transparent; /* またはこの行を完全に削除してもOKです */ border-radius: 8px; box-shadow: none; /* ⭐ついでに影も消してよりシンプルに⭐ */ text-align: center; } .countdown { font-size: 40px; color: #007bff; font-weight: bold; } .countdown #timer { color: #dc3545; } /* QRコード */ .qr-container { margin: 20px 0; text-align: center; /* ⭐⭐ この行を追加します ⭐⭐ */ } /* QRコードが生成する画像 (中身) も中央に配置されるように調整 */ #qrcode { display: inline-block; /* ⭐⭐ この要素はすでに存在していればOK ⭐⭐ */ margin: 0 auto; } #qrcode img { margin: 0 auto; } /* --- FOLLOW US / SNS SHARE スタイル --- */ .follow-us-container { margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; text-align: center; } .follow-us-container h3 { font-size: 1.1em; color: #444; margin-bottom: 15px; } .social-icons a { display: inline-block; width: 40px; height: 40px; line-height: 40px; /* テキストを縦方向に中央揃え */ margin: 0 8px; border-radius: 50%; /* 円形にする */ color: white; font-weight: bold; text-decoration: none; transition: transform 0.2s; } .social-icons a:hover { transform: translateY(-3px); } /* 各SNSのカラー設定 */ .social-icon.twitter { background-color: #000000; /* X (Twitter) */ } .social-icon.facebook { background-color: #3b5998; /* Facebook */ } .social-icon.linkedin { background-color: #0077b5; /* LinkedIn */ } /* --- COPYRIGHT スタイル --- */ .copyright { margin-top: 15px; padding-bottom: 15px; /* 下部に少しスペースを開ける */ text-align: center; font-size: 0.8em; color: #999; /* グレーで目立たなくする */ } /* --- にぎやかなアニメーション設定 --- */ /* 1. ドキドキする動き（パルス） */ @keyframes heartbeat { 0% { transform: scale(1); } 15% { transform: scale(1.05); } 30% { transform: scale(1); } 45% { transform: scale(1.05); } 60% { transform: scale(1); } 100% { transform: scale(1); } } /* ロゴの文字に適用 */ .header-logo h1 { animation: heartbeat 3s infinite; /* 3秒ごとにドキドキ */ text-shadow: 2px 2px 0px #ffd700; /* ポップな影を追加 */ } /* 2. ふわふわ浮く動き */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } /* ロゴの犬の画像に適用 */ .header-logo img { animation: float 4s ease-in-out infinite; /* 4秒ごとにふわふわ */ } /* 3. ボタンを押したくなる動き（バウンス） */ button:hover, .generate-button:hover { transform: translateY(-3px) scale(1.02); /* マウスが乗ると少し浮いて大きくなる */ box-shadow: 0 5px 15px rgba(255, 127, 0, 0.4); /* 影が濃くなる */ } /* --- アニメーション定義: ロゴの強調 --- */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.03); } 100% { transform: scale(1); } } /* ロゴの文字（h1）にアニメーションを適用 */ .header-logo h1 { /* ... 既存のスタイル ... */ /* ⭐⭐ 修正箇所: アニメーションを適用 ⭐⭐ */ animation: pulse 3s infinite ease-in-out; } /* --- FAQ アコーディオンスタイル --- */ .faq-section { margin-top: 40px; text-align: left; /* 質問文を左揃えにする */ border-top: 1px solid #eee; /* メインコンテンツとの区切り線 */ padding-top: 20px; } .faq-section h2 { text-align: center; /* タイトルを中央揃えにする */ color: #333; margin-bottom: 25px; } .accordion { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 10px; overflow: hidden; /* コンテンツがスムーズに開閉するようにする */ } .accordion-header { background-color: #f7f7f7; color: #333; cursor: pointer; /* マウスを載せると指マークになる */ padding: 15px; width: 100%; border: none; text-align: left; outline: none; font-size: 1.1em; transition: background-color 0.3s; font-weight: bold; display: block; /* ボタン全体がクリック可能になるようにする */ } .accordion-header:hover { background-color: #e0e0e0; } /* 押された後のボタンの見た目 */ .accordion-header.active { background-color: #ff9800; /* 押されたらDACHSHUNDカラーに */ color: white; } .accordion-content { padding: 0 18px; max-height: 0; /* ⭐最初はこの高さをゼロにして隠します⭐ */ overflow: hidden; /* ⭐高さゼロから文字がはみ出さないように隠す⭐ */ transition: max-height 0.4s ease-in-out; /* スムーズに開くアニメーション */ background-color: #ffffff; border-top: 1px solid #eee; } .accordion-content p { padding-top: 15px; padding-bottom: 15px; margin: 0; color: #555; }