/* ここにCSSを記述（レスポンシブ対応など） */body {font-family: sans-serif;margin: 0;padding: 0;background-color: #f0f8ff;/* 全体背景（淡い青） */font-size: 16px;/* 基本のフォントサイズを16pxに */line-height: 1.6;}.container {max-width: 960px;margin: 0 auto;padding: 20px;}/* ヒーローエリア */.hero {text-align: center;padding: 40px 0;background: linear-gradient(to bottom, #e0f4ff, #ffffff);/* グラデーション */border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);/* 影 */opacity: 0;animation: fadeIn 1s forwards;/* フェードイン */}.hero img {max-width: 80%;height: auto;margin-bottom: 20px;/* 画像の下に余白 */}.hero h1 {font-size: 2.2em;/* 少し大きく */color: #007bff;/* 青 */font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin-bottom: 10px;}.hero p {font-size: 1.2em;/* 少し大きく */color: #555;margin-top: 10px;margin-bottom: 20px;/* キャッチコピー下の余白 */}.hero-price {/* ヒーローセクション内の価格に適用 */font-size: 1.3em;/* 少し大きめに */margin-bottom: 5px;line-height: 1.2;/* 行の高さを調整 */}.hero .regular-price {color: #888;text-decoration: line-through;}.hero .sale-price {color: #ff4500;font-weight: bold;font-size: 1.7em;/* セール価格をさらに強調 */margin-bottom: 20px;/* CTAボタンとの間に余白 */}.hero .sale-price span {font-weight: bold;}/* ヒーローセクションのCTAボタン */.hero-cta {display: block;/* ブロック要素にして縦に並べる */width: 80%;/* 幅を調整 */max-width: 300px;/* 最大幅を設定 */margin: 0 auto 15px auto;/* 中央寄せと下マージン */padding: 15px 25px;/* ボタンのパディングを調整 */font-size: 1.4em;/* ボタンの文字サイズを大きく */}.hero-detail-button {display: block;/* ブロック要素にして縦に並べる */width: 80%;/* 幅を調整 */max-width: 300px;/* 最大幅を設定 */margin: 0 auto 20px auto;/* 中央寄せと下マージン */padding: 10px 20px;/* ボタンのパディングを調整 */font-size: 1.2em;/* ボタンの文字サイズを調整 */background: #6c757d;/* 詳細を見るボタンは少し落ち着いた色に */}.hero-detail-button:hover {background: #5a6268;}/* レスポンシブ対応 (768px以下) */@media (max-width: 768px) {.hero h1 {font-size: 1.8em;/* さらに小さく */}.hero-price {font-size: 1.2em;}.hero .sale-price {font-size: 1.5em;}.hero-cta,.hero-detail-button {width: 90%;font-size: 1.3em;}}/* 特徴セクション */#features {display: flex;flex-wrap: wrap;justify-content: space-between;margin-top: 30px;background-color: #ffffff;/* 白背景 */border-radius: 10px;padding: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}#features h2 {color: #007bff;/* 青 */font-size: 2.0em;/* 少し大きく */margin-bottom: 15px;text-align: center;/* 中央揃え */width: 100%;/* 幅を100%に */}.feature {width: 48%;margin-bottom: 20px;padding: 15px;background-color: rgba(173, 216, 230, 0.3);/* 淡い水色 */border-radius: 8px;transition: transform 0.3s ease-in-out;/* ホバー効果 */}.feature:hover {transform: translateY(-5px);}.feature img {max-width: 100%;height: auto;border-radius: 8px;}.feature h2 {color: #007bff;/* 青 */font-size: 1.5em;/* 少し大きく */margin-top: 10px;margin-bottom: 5px;}.feature p {color: #555;font-size: 1.1em;/* 少し大きく */}/* CTAボタン */.cta-button {display: inline-block;padding: 10px 20px;/* 少し小さく */background: linear-gradient(to right, #007bff, #00a2ff);/* グラデーション */color: #fff;text-decoration: none;border-radius: 8px;margin-top: 15px;/* 少し小さく */font-size: 1.2em;/* 少し大きく */transition: background 0.3s ease-in-out;}.cta-button:hover {background: linear-gradient(to right, #00a2ff, #007bff);}/* お客様の声 */.customer-reviews {margin-top: 40px;text-align: center;background-color: #e0f4ff;/* 淡い青 */border-radius: 10px;padding: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.customer-reviews h2 {color: #007bff;/* 青 */font-size: 1.8em;/* 少し大きく */margin-bottom: 15px;}.review {border: 1px solid #87ceeb;/* 水色 */padding: 10px;/* 少し小さく */margin-bottom: 10px;/* 少し小さく */border-radius: 8px;background-color: #f0f8ff;/* 背景色を修正 */}.review p {color: #555;font-size: 1.1em;/* 少し大きく */line-height: 1.5;text-align: left;/* 左寄せ指定を追加 */font-family: 'Hina Mincho', 'Kaisei Decol', 'BIZ UDPMincho', 'Zen Old Koten', cursive;/* 手書きフォント風の指定 *//*よりデザイン性の高い手書きフォントを使用する場合は、Google FontsなどのWebフォントサービスを利用し、以下のようなフォントを読み込んで指定してください。例:font-family: 'Handlee', cursive;font-family: 'Kalam', cursive;font-family: 'Patrick Hand', cursive;font-family: 'Caveat', cursive;*/}/* 製品詳細 */.product-details {margin-top: 40px;background-color: #ffffff;border-radius: 10px;padding: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.product-details h2 {border-bottom: 2px solid #007bff;/* 青 */padding-bottom: 8px;color: #007bff;/* 青 */font-size: 1.8em;/* 少し大きく */margin-bottom: 10px;}.product-details h3 {color: #00a2ff;/* 明るい青 */font-size: 1.4em;/* 少し大きく */margin-top: 20px;margin-bottom: 5px;}/* 3カラムレイアウト */.features-3-column {display: flex;justify-content: space-between;flex-wrap: wrap;}.features-3-column .feature {width: 30%;/* 30%で約3等分、少し余白を作る */margin-bottom: 20px;}.features-3-column .feature img {max-width: 100%;height: auto;border-radius: 8px;}.features-3-column .feature h4 {color: #007bff;font-size: 1.2em;/* 少し大きく */margin-top: 10px;margin-bottom: 5px;}.features-3-column .feature p {color: #555;font-size: 1.1em;/* 少し大きく */}.gallery {display: flex;flex-wrap: wrap;justify-content: center;margin-top: 15px;}.gallery img {max-width: 48%;/* 2列にする */height: auto;margin: 5px;/* 画像間の余白を調整 */border-radius: 8px;transition: transform 0.3s ease-in-out;}.gallery img:hover {transform: scale(1.02);}/* 仕様比較テーブル */.comparison-table {width: 100%;/* 幅を100%に */margin: 20px auto;border-collapse: collapse;background-color: #ffffff;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.comparison-table th,.comparison-table td {border: 1px solid #87ceeb;/* 水色 */padding: 6px;/* 少し小さく */text-align: center;font-size: 0.9em;/* 少し小さく */}.comparison-table th {background-color: #b0e0e6;/* 淡い水色 */color: #333;}/* 2025年モデル (pointクラス) の強調スタイル */.comparison-table .point {background-color: #e6f7ff; /* 明るい水色の背景 */border: 2px solid #007bff; /* 青い強調枠線 */font-weight: bold; /* 太字 */font-size: 1.0em; /* 少し大きく */color: #0056b3; /* 濃い目の青色 */}/* 製品仕様テーブル */.spec-table {width: 100%;border-collapse: collapse;margin-top: 20px;background-color: #ffffff;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.spec-table th,.spec-table td {border: 1px solid #87ceeb;/* 水色 */padding: 6px;/* 少し小さく */text-align: left;font-size: 0.9em;/* 少し小さく */}.spec-table th {background-color: #b0e0e6;/* 淡い水色 */color: #333;}/* FAQ */.faq {margin-top: 40px;background-color: #f0ffff;/* 淡いアクアマリン */border-radius: 10px;padding: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.faq h2 {color: #007bff;/* 青 */font-size: 1.8em;/* 少し大きく */margin-bottom: 15px;}.faq h3 {border-bottom: 1px solid #00a2ff;/* 明るい青 */padding-bottom: 5px;color: #00a2ff;/* 明るい青 */font-size: 1.3em;/* 少し大きく */margin-top: 15px;margin-bottom: 5px;}.faq p {color: #555;font-size: 1.1em;/* 少し大きく */line-height: 1.5;}/* 保証 */.guarantee {margin-top: 40px;background: linear-gradient(to right, #e0ffff, #f0ffff);/* グラデーション */padding: 20px;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.guarantee h2 {color: #007bff;/* 青 */font-size: 1.8em;/* 少し大きく */margin-bottom: 15px;}.guarantee p {color: #555;font-size: 1.1em;/* 少し大きく */line-height: 1.5;}/* ウェア比較 */.wear-comparison {margin-top: 40px;background: linear-gradient(to bottom, #e0ffff, #f0ffff);/* グラデーション */padding: 20px;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.wear-comparison h2 {color: #007bff;/* 青 */font-size: 1.8em;/* 少し大きく */margin-bottom: 15px;}.wear-comparison p {color: #555;font-size: 1.1em;/* 少し大きく */line-height: 1.5;}.wear-comparison ul {font-size: 1.1em;/* 少し大きく */}/* 付け替え */.replacement {margin-top: 40px;background: linear-gradient(to bottom, #f0ffff, #e0ffff);/* グラデーション */padding: 20px;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);text-align: center;/* 画像とテキストを中央揃え */}.replacement h2 {color: #007bff;/* 青 */font-size: 1.8em;/* 少し大きく */margin-bottom: 15px;}.replacement img {max-width: 80%;height: auto;margin-bottom: 15px;}.replacement p {color: #555;font-size: 1.1em;/* 少し大きく */line-height: 1.5;}/* 下部CTA */.cta-bottom {margin-top: 40px;text-align: center;background-color: #ffffff;border-radius: 10px;padding: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.cta-bottom h2 {color: #007bff;/* 青 */font-size: 1.8em;/* 少し大きく */margin-bottom: 15px;}.cta-bottom .regular-price {/* cta-bottom内の通常価格 */font-size: 1.2em;color: #888;/* 少し落ち着いた色 */text-decoration: line-through;/* 取り消し線 */margin-bottom: 5px;}.cta-bottom .sale-price {/* cta-bottom内のセール価格 */font-size: 1.5em;color: #ff4500;/* 目立つ色 */font-weight: bold;/* 太字 */margin-bottom: 15px;/* ボタンとの間に余白 */}.cta-bottom .sale-price span {font-weight: bold;}.cta-bottom p {color: #555;font-size: 1.1em;/* 少し大きく */margin-top: 10px;}/* 仕様比較テーブル */.comparison-table {width: 100%;/* 幅を100%に */margin: 20px auto;border-collapse: collapse;background-color: #ffffff;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.comparison-table th,.comparison-table td {border: 1px solid #87ceeb;/* 水色 */padding: 6px;/* 少し小さく */text-align: center;font-size: 0.9em;/* 少し小さく */}.comparison-table th {background-color: #b0e0e6;/* 淡い水色 */color: #333;}/* 製品仕様テーブル */.spec-table {width: 100%;border-collapse: collapse;margin-top: 20px;background-color: #ffffff;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.spec-table th,.spec-table td {border: 1px solid #87ceeb;/* 水色 */padding: 6px;/* 少し小さく */text-align: left;font-size: 0.9em;/* 少し小さく */}.spec-table th {background-color: #b0e0e6;/* 淡い水色 */color: #333;}/* レスポンシブ対応 */@media (max-width: 768px) {.feature {width: 100%;}.hero img {max-width: 100%;}.hero h1 {font-size: 2.0em;/* 少し小さく */}.comparison-table {width: 100%;font-size: 0.85em;/* さらに小さく */}.spec-table {width: 100%;font-size: 0.85em;/* さらに小さく */}.gallery img {max-width: 100%;/* 1列にする */height: auto;margin: 10px;/* 画像間の余白を調整 */}/* 3カラムレイアウトを1カラムに */.features-3-column .feature {width: 100%;}}/* アニメーション */@keyframes fadeIn {from {opacity: 0;transform: translateY(20px);}to {opacity: 1;transform: translateY(0);}}/*価格*/.price-section {text-align: center;margin-top: 30px;margin-bottom: 30px;}.regular-price {font-size: 1.2em;color: #888;/* 少し落ち着いた色 */text-decoration: line-through;/* 取り消し線 */margin-bottom: 5px;}.sale-price {font-size: 1.5em;color: #ff4500;/* 目立つ色 */font-weight: bold;/* 太字 */}.sale-price span {font-weight: bold;}