---
import "../styles/style.scss";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
---
<Header title="施工事例" />
<main>
    <section id="single">
        <div class="single wrapper">
            <h1 class="en">WORKS</h1>
            <h2 class="jp">施工事例</h2>
            <a href="/works" class="singleBtn">施工事例一覧へ戻る</a>
            <div class="singleContainer">
                <!-- slick -->
                <div class="singleContainer">
                    <div class="singleSlider">
                        <div><img src="https://placehold.jp/1200x550.png" alt="ダミー画像1"></div>
                        <div><img src="https://placehold.jp/1200x550.png" alt="ダミー画像2"></div>
                        <div><img src="https://placehold.jp/1200x550.png" alt="ダミー画像3"></div>
                    </div>
                </div>
            </div>
            <a href="service/01" class="categorytag">足場工事</a>
            <p class="singletitle">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
            <p class="description">
                この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
            </p>
            <div class="photoContainer">
                <div class="before">
                    <div class="txt">Before</div>
                    <div class="img">
                        <img src="http://placehold.jp/24/cccccc/ffffff/529x289.png?text=Before" alt="">
                    </div>
                </div>
                <div class="after">
                    <div class="txt">After</div>
                    <div class="img">
                        <img src="http://placehold.jp/24/cccccc/ffffff/529x289.png?text=After" alt="">
                    </div>
                </div>
            </div>
        </div>
    </section>
<Footer />