/ヤマガタンver8

●

佐藤繊維のブランドイメージである「ニット」や「糸」の楽しさを表現するため、**鮮やかな色を使いつつ、雑誌のように余白を活かした「大人かわいい」デザイン**を作成しました。**【デザインのポイント】**1. **読みやすさ重視**: 文字サイズを少し大きめ（17px）にし、行間を広げています。2. **文字化け完全対策**: チェックマークやアイコンは、特殊文字（数字）を使わず、CSSの図形描画で作成しています。3. **おしゃれな配色**: パステルカラーのグラデーション背景と、ビビッドなアクセントカラーを組み合わせ、楽しげな雰囲気を演出しました。### Webページ作成用コード（HTML + CSS）このままコピーしてご使用ください。```html佐藤繊維「手のひらから紡がれる一本の糸」 /* ========================================= 全体設定（フォント・背景） ========================================= */ body { margin: 0; padding: 0; /* 背景：糸が混ざり合うようなやわらかいグラデーション */ background: linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%); font-family: "Helvetica Neue", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; color: #444; /* 文字色は真っ黒ではなくダークグレーで柔らかく */ line-height: 1.9; /* 行間を広めに */ -webkit-text-size-adjust: 100%; font-size: 17px; /* 読みやすい少し大きめの文字 */ } /* ========================================= レイアウト（カード型） ========================================= */ .wrapper { display: flex; justify-content: center; padding: 40px 20px; } .card { background-color: #fff; width: 100%; max-width: 860px; padding: 60px; border-radius: 24px; /* 角を丸く */ box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* ふんわり浮く影 */ position: relative; overflow: hidden; } /* 上部のカラフルなライン装飾 */ .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: linear-gradient(to right, #ff9a9e, #fecfef, #a18cd1, #fbc2eb, #84fab0); } /* ========================================= ヘッダー ========================================= */ .header-section { text-align: center; margin-bottom: 50px; border-bottom: 2px dashed #e0e0e0; /* 点線でニット感を演出 */ padding-bottom: 40px; } .sub-badge { display: inline-block; background: #333; color: #fff; font-size: 0.9rem; padding: 6px 18px; border-radius: 50px; margin-bottom: 15px; font-weight: bold; letter-spacing: 0.1em; } .main-title { font-size: 2.4rem; font-weight: 800; color: #2d3436; margin: 10px 0 25px 0; line-height: 1.3; } .title-highlight { color: #d6336c; /* アクセントカラー */ display: inline-block; } /* タグ */ .tags { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .tag { background: #f8f9fa; color: #555; border: 1px solid #ddd; padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: bold; } .tag.accent { background: #fff0f6; color: #c2255c; border-color: #faa2c1; } /* ========================================= コンテンツ共通 ========================================= */ .section { margin-bottom: 60px; } .section-title { font-size: 1.6rem; color: #333; font-weight: bold; margin-bottom: 30px; display: flex; align-items: center; } /* 見出しの左に色のバー */ .section-title::before { content: ""; display: inline-block; width: 8px; height: 30px; background: linear-gradient(to bottom, #ff9a9e, #fecfef); margin-right: 15px; border-radius: 4px; } /* 導入文の強調エリア */ .intro-box { background-color: #f1f8ff; /* 薄い青 */ border-radius: 16px; padding: 30px; margin: 30px 0; position: relative; } .intro-box p { margin: 0; color: #0c3e6d; font-weight: 500;} /* ========================================= チェックリスト（CSS図形で作成） ========================================= */ .check-box { background-color: #fff9db; /* 薄い黄色 */ padding: 30px; border-radius: 16px; } .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { position: relative; padding-left: 40px; margin-bottom: 15px; font-weight: bold; color: #5c4e06; display: flex; align-items: center; } .check-list li:last-child { margin-bottom: 0; } /* CSSでチェックマークを描画（文字化け防止） */ .check-mark { position: absolute; left: 0; top: 3px; width: 24px; height: 24px; background-color: #fcc419; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .check-mark::after { content: ""; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-bottom: 2px; } /* ========================================= テーブル（おしゃれなデザイン） ========================================= */ .info-table { width: 100%; border-collapse: collapse; font-size: 1rem; } .info-table th { width: 30%; background-color: #fff; color: #888; font-weight: normal; text-align: left; padding: 20px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: top; } .info-table td { padding: 20px 10px; border-bottom: 1px solid #f0f0f0; color: #333; font-weight: 500; font-size: 1.05rem; } .price-big { font-size: 1.6rem; font-weight: 800; color: #e64980; /* ピンク */ } .map-btn { display: inline-block; margin-top: 5px; color: #228be6; text-decoration: none; border-bottom: 1px solid #228be6; padding-bottom: 2px; font-size: 0.95rem; } /* ========================================= 3カラム（アイコン付き） ========================================= */ .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-card { background: #fff; border: 2px solid #f1f3f5; border-radius: 16px; padding: 20px; text-align: center; transition: transform 0.2s; } .grid-card:hover { transform: translateY(-5px); border-color: #ff9a9e; } /* ヘッダー色分け */ .head-green { color: #2b8a3e; border-bottom: 2px solid #b2f2bb; padding-bottom:10px; margin-bottom:15px; font-weight:bold; } .head-orange { color: #e67700; border-bottom: 2px solid #ffec99; padding-bottom:10px; margin-bottom:15px; font-weight:bold; } .head-red { color: #c92a2a; border-bottom: 2px solid #ffc9c9; padding-bottom:10px; margin-bottom:15px; font-weight:bold; } .grid-card ul { text-align: left; padding-left: 10px; margin: 0; list-style: none; font-size: 0.95rem; color: #444; } .grid-card li { margin-bottom: 6px; } /* ========================================= お問い合わせ ========================================= */ .footer-area { background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); color: #004085; padding: 50px 20px; border-radius: 16px; text-align: center; } .contact-btns { display: flex; justify-content: center; gap: 20px; margin: 30px 0; flex-wrap: wrap; } .c-btn { background-color: #fff; color: #004085; text-decoration: none; padding: 15px 35px; border-radius: 50px; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.1); transition: opacity 0.3s; } .c-btn:hover { opacity: 0.9; transform: scale(1.02); } .c-btn.tel { font-size: 1.4rem; } .c-btn.mail { font-size: 1.1rem; display: flex; align-items: center; } /* ========================================= スマホ対応 ========================================= */ @media (max-width: 768px) { .wrapper { padding: 0; } .card { padding: 40px 20px; border-radius: 0; } .main-title { font-size: 1.8rem; } .info-table th, .info-table td { display: block; width: 100%; border: none; padding: 5px 0; } .info-table th { margin-top: 20px; color: #aaa; font-size: 0.9rem; } .grid-container { grid-template-columns: 1fr; } .contact-btns { flex-direction: column; align-items: center; } .c-btn { width: 80%; text-align: center; justify-content: center; } } 歴史 × 手紡ぎ体験 × GEAランチ佐藤繊維「手のひらから紡がれる一本の糸」 ? 3時間 ★ 難易度：適度 ? 工場見学 ? 糸紡ぎ体験 ?? ランチ付き手から生まれる、世界にひとつの糸。糸は、機械だけでなく、人の手からも生まれます。この体験では、佐藤繊維が大切にしてきた素材を使い、実際に糸を紡ぐ工程を体験していただきます。職人の丁寧な指導のもと、繊維を撚り、少しずつ形になっていく糸。均一ではないからこそ美しく、触れるたびに作り手の時間が感じられる―― そんな「手仕事の価値」を、静かな時間の中で味わうことができます。完成した糸は、そのままお持ち帰りいただけます。旅の記憶を、形あるものとして残せる特別な体験です。 ? こんな方におすすめ手仕事やクラフト、編み物が好きな方忙しい日常から少し離れ、集中する時間を持ちたい方旅の思い出になる特別な作品を作りたい方体験詳細 ? 開催期間～2026年3月31日(火)まで ※カレンダーなどによって変更となる可能性があります ? 体験料金お1人様 6,600円（税込） ※見学料・体験費・GEAランチ代込み ※子ども料金はありません ? 予約人数 1予約　2名～6名様まで ※7名以上の場合はご相談ください ? 集合時間 10:00 ? 集合場所佐藤繊維本社玄関（石蔵隣の白い建物・黒い扉） ? Googleマップで地図を見る〒991-0053 山形県寒河江市元町１丁目１９－１ ? 決済方法事前クレジットカード払い含まれるもの・羊毛産業の歴史講和料・羊毛の糸紡ぎ講師料・糸紡ぎ材料費・ランチ代含まれないもの・追加の材料代・スピンドル(道具。希望者は別途購入可) 必要なもの・必要な方は筆記用具・老眼鏡(手元作業のため推奨) お問い合わせ一般社団法人寒河江市観光物産協会 ? 0237-86-8866 ?? メールで問い合わせ (営業時間 9:00～17:00 / 12/31～1/3休み) sagaetaiken@sagae-kanko.com ```

★2026.01.08
★(C)一般社団法人寒河江市観光物産協会