front-page.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ここにキャッチフレーズが入る"> <title>サイトのタイトル</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/main.css"> </head> <body id="top"> <header> <h1>CG-BIM Studio</h1> <nav id="g-nav"> <ul> <li><a href="#top">トップ</a> <div class="drop-menu"> <div class="drop-inner"> <p class="drop-list"><a href="#service"> <img src="https://placehold.jp/200x150.png" alt=""> サービス</a></p> <p class="drop-list"><a href="#pick-up"> <img src="https://placehold.jp/200x150.png" alt=""> おすすめ</a></p> <p class="drop-list"><a href="#voice"> <img src="https://placehold.jp/200x150.png" alt=""> お客様の声</a></p> <p class="drop-list"><a href="#about"> <img src="https://placehold.jp/200x150.png" alt=""> 私達について</a></p> </div><!-- /.drop-inner --> </div><!-- /#drop-menu --> </li> <li><a href="works/works.html">実績紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">ブログ</a></li> <li><a href="form/form.html">お問い合わせ</a></li> </ul> </nav> <button id="ham-btn"><span></span></button> </header> <nav id="sp-nav"> <ul> <li><a href="#top">トップ</a></li> <li><a href="works/works.html">実績紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">ブログ</a></li> <li><a href="form/form.html">お問い合わせ</a></li> </ul> </nav> <div id="particles-js"></div> <div class="tag-line"> <p class="gradation">ビジョンを形にする<br> 建築CGパースで新たな未来を描こう</p> </div> <div class="gallery-wrapper"> <div class="photo-box"> <p><img src="https://placehold.jp/600x400.png" alt=""></p> <p><img src="https://placehold.jp/640x960.png" alt=""></p> <p><img src="https://placehold.jp/600x400.png" alt=""></p> </div> <div class="text-box"> <h2 class="gradation">ビジョンを形に</h2> <p class="lead">CG-BIM Studioでは、BIMを活用し建築の未来をデジタルモデルで描き出します。高品質なCGパースを通じて、リアルな建築イメージを再現し、設計変更の迅速な反映や効率化されたプロジェクト管理を実現します。<br> 卓越したCGパース制作により、お客様のビジョンを実現するために、最先端のBIM技術を駆使し、革新的な建築CGパースを提供致します。</p> </div> </div><!-- /.gallery-wrapper --> <section id="news"> <h3 class="gradation">お知らせ</h3> <div class="news-wrapper"> <dl class="news-list"> <dt>2024年04月09日<span><a href="#">サブカテゴリー</a></span></dt> <dd><a href="#">記事のタイトル</a></dd> <dt>2024年04月08日<span><a href="#">サブカテゴリー</a></span></dt> <dd><a href="#">記事のタイトル</a></dd> <dt>2024年04月07日<span><a href="#">サブカテゴリー</a></span></dt> <dd><a href="#">記事のタイトル</a></dd> </dl> <p class="to-news btn-1"><a href="#">お知らせ一覧へ</a></p> </div><!-- /.news-wrapper --> </section> <section id="service"> <h3 class="gradation">事業内容</h3> <div class="service-wrapper"> <div class="service-box"> <h4><span>1</span>外観CGパース</h4> <p class="illust"><img src="img/illust-01.svg" alt=""></p> <p class="service-text">建物の外観をCG技術を使用してリアルに再現し、建物の外見や材質、環境などを視覚的に表現します。<br> 建物のデザインや色彩、光の表現などを調整して、建築物の魅力を引き出します。</p> </div><!-- /.service-box --> <div class="service-box"> <h4><span>2</span>内観CGパース</h4> <p class="illust"><img src="img/illust-02.svg" alt=""></p> <p class="service-text">建物の内部空間をCG技術を使用して表現し、部屋のレイアウトや家具、照明、素材などを再現します。<br> クライアントの要望に応じた内装デザインをビジュアル化し、イメージの共有やプレゼンテーションに活用されます。</p> </div><!-- /.service-box --> <div class="service-box"> <h4><span>3</span>BIMを使ったCGモデリング</h4> <p class="illust"><img src="img/illust-03.svg" alt=""></p> <p class="service-text">BIMを活用することで、3Dモデリングによる空間情報だけでなく、時間情報や費用情報などの情報も統合的に扱い、建築プロジェクト全体を最適化することができます。</p> </div><!-- /.service-box --> <div class="service-box"> <h4><span>4</span>VR・ARコンテンツ</h4> <p class="illust"><img src="img/illust-04.svg" alt=""></p> <p class="service-text">建物や空間のVR（仮想現実）やAR（拡張現実）コンテンツを制作します。<br>クライアントや顧客が建物や空間を仮想的に体験し、リアルなイメージを得ることができます。</p> </div><!-- /.service-box --> </div><!-- /.service-wrapper --> </section> <section id="pick-up"> <h3 class="gradation">ピックアップ</h3> <div class="pick-wrapper"> <div class="pick-box" data-rank="1"> <div class="pick-text-box"> <h4>制作実績の見出し1</h4> <p class="pick-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos optio voluptate esse dolores possimus corporis!</p> <ul> <li><a href="#">外観CGパース</a></li> <li><a href="#">VR・ARコンテンツ</a></li> </ul> <p class="btn-1 to-works"><a href="#">実績一覧へ</a></p> </div><!-- /.pick-text-box --> <p class="pick-img"> <img src="https://placehold.jp/800x600.png" alt=""> </p> </div><!-- /.pick-box --> <div class="pick-box" data-rank="2"> <div class="pick-text-box"> <h4>制作実績の見出し2</h4> <p class="pick-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos optio voluptate esse dolores possimus corporis!</p> <ul><li><a href="#">内観CGパース</a></li></ul> <p class="btn-1 to-works"><a href="#">実績一覧へ</a></p> </div><!-- /.pick-text-box --> <p class="pick-img"> <img src="https://placehold.jp/800x600.png" alt=""> </p> </div><!-- /.pick-box --> <div class="pick-box" data-rank="3"> <div class="pick-text-box"> <h4>制作実績の見出し3</h4> <p class="pick-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos optio voluptate esse dolores possimus corporis!</p> <ul><li><a href="#">BIM</a></li></ul> <p class="btn-1 to-works"><a href="#">実績一覧へ</a></p> </div><!-- /.pick-text-box --> <p class="pick-img"> <img src="https://placehold.jp/800x600.png" alt=""> </p> </div><!-- /.pick-box --> </div><!-- /.pick-wrapper --> </section> <section id="voice"> <h3 class="gradation">利用者の声</h3> <div class="voice-wrapper"> <div class="voice-box"> <div class="avatar"> <img src="img/voice-1.svg" alt=""> </div> <p class="voice-name">A社の担当者様</p> <p class="voice-date">2024年4月10日</p> <h4>イメージ通りのCGで満足</h4> <p class="voice-text">当社の建物のCGパースを制作していただきました。BIM技術を使って、リアルなイメージを提供していただき、大変満足しております。また、スムーズなコミュニケーションで、要望に沿ったCGパースを作っていただけたことも、大変助かりました。</p> </div><!-- /.voice-box --> <div class="voice-box"> <div class="avatar"> <img src="img/voice-2.svg" alt=""> </div> <p class="voice-name">B社の担当者様</p> <p class="voice-date">2024年3月20日</p> <h4>丁寧な仕事に感謝しています</h4> <p class="voice-text">弊社の商業施設のCGパースを制作していただきました。BIM技術を使ったCGパースは、まるで完成した建物のようにリアルで、投資家の方々からも高く評価されました。スピーディーな対応と丁寧な仕事に感謝しています。</p> </div><!-- /.voice-box --> <div class="voice-box"> <div class="avatar"> <img src="img/voice-3.svg" alt=""> </div> <p class="voice-name">C社の担当者様</p> <p class="voice-date">2024年3月12日</p> <h4>最新のBIM技術に感動</h4> <p class="voice-text">私たちのマンションのCGパースを制作していただきました。BIM技術を駆使して、細かい部分までリアルに再現していただけたことに、感動しました。また、短い期間での対応やスタッフの方々の丁寧な対応に、大変満足しております。</p> </div><!-- /.voice-box --> </div><!-- /.voice-wrapper --> </section><!-- /#voice --> <section id="about"> <div class="about-text"> <h3 class="about-title">私達について</h3> <dl class="about-list"> <dt>名称</dt> <dd>CG-BIM Studio</dd> <dt>設立</dt> <dd>2016年4月</dd> <dt>事業内容</dt> <dd>3DCGを活用したパース制作</dd> <dt>従業員数</dt> <dd>46名<span>令和6年4月時点</span></dd> </dl> </div> </section><!-- /#about --> <section id="blog"> <h3 class="gradation">スタッフブログ</h3> <div class="blog-wrapper"> <div class="blog-box"> <a href="#"> <h4>投稿記事のタイトル</h4> <p class="blog-date">2024/04/08</p> <p class="blog-img"><img src="https://placehold.jp/600x400.png" alt=""></p> <div class="blog-text"><p>wpの投稿テキストはpタグごと出力されます。wpの投稿テキストはpタグごと出力されます。</p></div> </a> </div><!-- /.blog-box --> <div class="blog-box"> <a href="#"> <h4>投稿記事のタイトル</h4> <p class="blog-date">2024/04/08</p> <p class="blog-img"><img src="https://placehold.jp/600x400.png" alt=""></p> <div class="blog-text"><p>wpの投稿テキストはpタグごと出力されます。wpの投稿テキストはpタグごと出力されます。</p></div> </a> </div><!-- /.blog-box --> <div class="blog-box"> <a href="#"> <h4>投稿記事のタイトル</h4> <p class="blog-date">2024/04/08</p> <p class="blog-img"><img src="https://placehold.jp/600x400.png" alt=""></p> <div class="blog-text"><p>wpの投稿テキストはpタグごと出力されます。wpの投稿テキストはpタグごと出力されます。</p></div> </a> </div><!-- /.blog-box --> <div class="blog-box"> <a href="#"> <h4>投稿記事のタイトル</h4> <p class="blog-date">2024/04/08</p> <p class="blog-img"><img src="https://placehold.jp/600x400.png" alt=""></p> <div class="blog-text"><p>wpの投稿テキストはpタグごと出力されます。wpの投稿テキストはpタグごと出力されます。</p></div> </a> </div><!-- /.blog-box --> </div><!-- /.blog-wrapper --> </section><!-- /#blog --> <div class="to-form-wrapper"> <div class="to-catalog"> <a href="#"> <p>カタログ請求<span>詳しくはこちらから</span></p> </a> </div><!-- /.to-catalog --> <div class="to-message"> <a href="#"> <p>お問い合わせ<span>詳しくはこちらから</span></p> </a> </div><!-- /.to-message --> </div><!-- /.to-form-wrapper --> <footer> <nav class="footer-nav"> <ul> <li><a href="#">トップ</a></li> <li><a href="works/works.html">実績紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">ブログ</a></li> <li><a href="form/form.html">お問い合わせ</a></li> <li><a href="#">サイトポリシー</a></li> </ul> </nav> <p><small>© 2024 CG-BIM Studio</small></p> </footer> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script src="js/my-particles.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script> <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js:title"></script> <script> $(function(){ //ピックアップ部分 $(window).on('scroll resize',function(){ let scrTop = $(window).scrollTop(); let winHeight = $(window).outerHeight(); $('.pick-img').each(function(){ let elmTop = $(this).offset().top; let h = $(this).outerHeight(); if(scrTop > elmTop - winHeight + h){ $(this).addClass('scroll'); } }); }); //ハンバーガーボタン }); </script> <script> const mySwiper = new Swiper('.swiper', { slidesPerView: 1, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'） spaceBetween: 20, grabCursor: true, pagination: { el: '.swiper-pagination', clickable: true, }, loop: true, // 無限ループさせる loopAdditionalSlides: 1, // 無限ループさせる場合に複製するスライド数 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, watchSlidesProgress: true,//はみ出ているスライド部分にもクラスを付与する breakpoints: { 600: { slidesPerView: 2, }, 1025: { slidesPerView: 3, spaceBetween: 32, } }, }); </script> </body> </html>
works.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ここにキャッチフレーズが入る"> <title>サイトのタイトル|worksページ</title> <link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../css/main.css"> </head> <body id="top"> <header> <h1>CG-BIM Studio</h1> <nav id="g-nav"> <ul> <li><a href="../front-page.html">トップ</a> <div class="drop-menu"> <div class="drop-inner"> <p class="drop-list"><a href="../front-page.html#service"> <img src="https://placehold.jp/200x150.png" alt=""> サービス</a></p> <p class="drop-list"><a href="../front-page.html#pick-up"> <img src="https://placehold.jp/200x150.png" alt=""> おすすめ</a></p> <p class="drop-list"><a href="../front-page.html#voice"> <img src="https://placehold.jp/200x150.png" alt=""> お客様の声</a></p> <p class="drop-list"><a href="../front-page.html#about"> <img src="https://placehold.jp/200x150.png" alt=""> 私達について</a></p> </div><!-- /.drop-inner --> </div><!-- /#drop-menu --> </li> <li><a href="#">実績紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">ブログ</a></li> <li><a href="../form/form.html">お問い合わせ</a></li> </ul> </nav> </header> <main> <div class="main-img"> <img src="https://placehold.jp/960x350.png" alt=""> </div> <div class="works-page-wrapper"> <h2 class="gradation">実績紹介</h2> <input type="radio" id="btn-all" name="filter-btn" checked> <label for="btn-all">ALL</label> <input type="radio" id="btn-ex" name="filter-btn"> <label for="btn-ex">外観CGパース</label> <input type="radio" id="btn-in" name="filter-btn"> <label for="btn-in">内観CGパース</label> <input type="radio" id="btn-bim" name="filter-btn"> <label for="btn-bim">BIM</label> <input type="radio" id="btn-vr" name="filter-btn"> <label for="btn-vr">VR/AR</label> <div class="works-item-wrapper"> <div class="works-box" data-category="cate-1 cate-3"> <a href="#"> <h3>投稿記事の見出し</h3> <p><img src="https://placehold.jp/800x600.png" alt=""></p> </a> <ul> <li><a href="#">外観CGパース</a></li> <li><a href="#">BIM</a></li> </ul> </div><!-- /.works-box --> <div class="works-box" data-category="cate-2 cate-4"> <a href="#"> <h3>投稿記事の見出し</h3> <p><img src="https://placehold.jp/800x600.png" alt=""></p> </a> <ul> <li><a href="#">内観CGパース</a></li> <li><a href="#">VR/AR</a></li> </ul> </div><!-- /.works-box --> <div class="works-box" data-category="cate-3"> <a href="#"> <h3>投稿記事の見出し</h3> <p><img src="https://placehold.jp/800x600.png" alt=""></p> </a> <ul> <li><a href="#">BIM</a></li> </ul> </div><!-- /.works-box --> <div class="works-box" data-category="cate-4"> <a href="#"> <h3>投稿記事の見出し</h3> <p><img src="https://placehold.jp/800x600.png" alt=""></p> </a> <ul> <li><a href="#">VR/AR</a></li> </ul> </div><!-- /.works-box --> <div class="works-box" data-category="cate-1 cate-2 cate-3 cate-4"> <a href="#"> <h3>投稿記事の見出し</h3> <p><img src="https://placehold.jp/800x600.png" alt=""></p> </a> <ul> <li><a href="#">外観CGパース</a></li> <li><a href="#">内観CGパース</a></li> <li><a href="#">BIM</a></li> <li><a href="#">VR/AR</a></li> </ul> </div><!-- /.works-box --> </div><!-- /.works-item-wrapper --> </div><!-- /.works-page-wrapper --> </main> <div class="to-form-wrapper"> <div class="to-catalog"> <a href="#"> <p>カタログ請求<span>詳しくはこちらから</span></p> </a> </div><!-- /.to-catalog --> <div class="to-message"> <a href="#"> <p>お問い合わせ<span>詳しくはこちらから</span></p> </a> </div><!-- /.to-message --> </div><!-- /.to-form-wrapper --> <footer> <nav class="footer-nav"> <ul> <li><a href="../front-page.html">トップ</a></li> <li><a href="#">実績紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">ブログ</a></li> <li><a href="../form/form.html">お問い合わせ</a></li> <li><a href="#">サイトポリシー</a></li> </ul> </nav> <p><small>© 2024 CG-BIM Studio</small></p> </footer> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script src="js/my-particles.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script> <script> $(function(){ $(window).on('scroll resize',function(){ let scrTop = $(window).scrollTop(); let winHeight = $(window).outerHeight(); $('.pick-img').each(function(){ let elmTop = $(this).offset().top; let h = $(this).outerHeight(); if(scrTop > elmTop - winHeight + h){ $(this).addClass('scroll'); } }); }); }); </script> </body> </html>
form.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="ここにキャッチフレーズが入る"> <title>サイトのタイトル|formページ</title> <link rel="stylesheet" href="../style.css"> <link rel="stylesheet" href="../css/main.css"> </head> <body id="top"> <header> <h1>CG-BIM Studio</h1> <nav id="g-nav"> <ul> <li><a href="../front-page.html">トップ</a> <div class="drop-menu"> <div class="drop-inner"> <p class="drop-list"><a href="../front-page.html#service"> <img src="https://placehold.jp/200x150.png" alt=""> サービス</a></p> <p class="drop-list"><a href="../front-page.html#pick-up"> <img src="https://placehold.jp/200x150.png" alt=""> おすすめ</a></p> <p class="drop-list"><a href="../front-page.html#voice"> <img src="https://placehold.jp/200x150.png" alt=""> お客様の声</a></p> <p class="drop-list"><a href="../front-page.html#about"> <img src="https://placehold.jp/200x150.png" alt=""> 私達について</a></p> </div><!-- /.drop-inner --> </div><!-- /#drop-menu --> </li> <li><a href="../works/works.html">実績紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <main> <div class="main-img"> <img src="https://placehold.jp/960x350.png" alt=""> </div> <section id="form-wrapper"> <h2 class="gradation">お問い合わせ</h2> <dl> <dt>お問い合わせ内容</dt> <dd> <label for="list-1"> <input type="radio" name="form-list" value="カタログ請求" id="list-1">カタログ請求 </label> <label for="list-2"> <input type="radio" name="form-list" value="採用について" id="list-2">採用について </label> <label for="list-3"> <input type="radio" name="form-list" value="製品について" id="list-3">製品について </label> <label for="list-4"> <input type="radio" name="form-list" value="その他" id="list-4">その他 </label> </dd> <dt>お名前</dt> <dd><input type="text" name="onamae" placeholder="お名前を入力して下さい" required></dd> <dt>フリガナ</dt> <dd><input type="text" name="kana" placeholder="カタカナで入力して下さい" required></dd> <dt>メールアドレス</dt> <dd><input type="email" name="email" placeholder="メールアドレスを入力して下さい" required></dd> <dt>お電話番号</dt> <dd><input type="text" name="tel" placeholder="ハイフン無しで入力して下さい"></dd> <dt>興味のある技術分野<span>複数選択可</span></dt> <dd> <label for="check-1"> <input type="checkbox" name="check" id="check-1" value="外観CGパース">外観CGパース </label> <label for="check-2"> <input type="checkbox" name="check" id="check-2" value="内観CGパース">内観CGパース </label> <label for="check-3"> <input type="checkbox" name="check" id="check-3" value="BIM">BIM </label> <label for="check-4"> <input type="checkbox" name="check" id="check-4" value="VR/AR">VR/AR </label> </dd> <dt>備考欄</dt> <dd> <textarea name="message"></textarea> </dd> </dl> <div class="button02"> <button type="submit">送信</button> </div> </section><!-- /.form-wrapper --> </main> <footer> <nav class="footer-nav"> <ul> <li><a href="../front-page.html">トップ</a></li> <li><a href="../works/works.html">実績紹介</a></li> <li><a href="#">採用情報</a></li> <li><a href="#">ブログ</a></li> <li><a href="#">お問い合わせ</a></li> <li><a href="#">サイトポリシー</a></li> </ul> </nav> <p><small>© 2024 CG-BIM Studio</small></p> </footer> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script src="js/my-particles.js"></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js'></script> <script> $(function(){ $(window).on('scroll resize',function(){ let scrTop = $(window).scrollTop(); let winHeight = $(window).outerHeight(); $('.pick-img').each(function(){ let elmTop = $(this).offset().top; let h = $(this).outerHeight(); if(scrTop > elmTop - winHeight + h){ $(this).addClass('scroll'); } }); }); }); </script> </body> </html>
main.scss
//パーシャルファイルを呼び出す @use "reset"; @use "forward" as var; /* googleFonts */ @import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap'); :root{ --font_ja: "Kaisei Opti", serif; --font_en: "Roboto Condensed", sans-serif; --text_color:#222; --bg_color-1:#374e74; --service-1:#F50057; --service-2:#E26B24; --service-3:#2FC91D; --service-4:#1D9CC9; } /* スムーススクロール */ html{ scroll-behavior: smooth; } body{ color: var(--text_color); a{ color: var(--text_color); } } /* コンポーネント */ /* 見出しのグラデーション */ .gradation{ background-image: linear-gradient(to right, #66b6cc 0%, #0e49a8 100%); background-clip: text; -webkit-background-clip: text; color: transparent;/* 文字の色を透明にする */ width: fit-content;/* 要素の幅を中身に合わせる */ } /* ボタンのスタイル */ .btn-1{ >a{ display: block; border-radius: 120px; border: 2px solid var(--bg_color-1); color: var(--bg_color-1); text-align: center; transition: 0.2s; &:hover{ background-color: var(--bg_color-1); color: #FFF; } } } /* header部分 */ header{ width: 80%; height: 70px; background-color: #c7c778; border-radius: 10px; position: fixed; z-index: calc(infinity); left: 0; right: 0; top: 20px; margin: auto; display: flex; justify-content: space-between; align-items: center; >h1{ padding-left: 20px; font-family: var(--font_en); } } /* nav部分 */ #g-nav{ width: 70%; height: 70px; position: relative; >ul{ display: flex; justify-content: right; gap: 0 40px; height: 70px; align-items: center; padding-right: 40px; >li{ height: 70px; >a{ padding: 14px 0; line-height: 70px; &:hover{ text-decoration: underline 4px #2c6a69; text-underline-offset: 4px; } } } } @include var.tab(){ display: none; } } //sp-nav部分 #sp-nav{ display: none; @include var.tab(){ display: block; } } //ハンバーガーボタン #ham-btn{ display: none; @include var.tab(){ display: block; width: 44px; height: 44px; margin-right: 20px; position: relative; >span{ display: block; width: 60%; height: 3px; background-color: var(--bg_color-1); position: absolute; inset: 0; margin: auto; top: -12px; &::after{ display: block; content: ""; width: 100%; height: 3px; background-color: var(--bg_color-1); position: absolute; top: 12px; } } &.is-active>span{ top: 0; rotate: 45deg; &::after{ top: 0; rotate: 90deg; } } } } /* drop-menu部分 */ .drop-menu{ opacity: 0;/* display:noneの代わり */ visibility: hidden;/* display:noneの代わり */ width: 100%; position: absolute; top: 70px; right: 0; padding-top: 20px; transition: 0.2s; >.drop-inner{ display: flex; flex-wrap: wrap; gap: 40px; background-color: #f5eadb; padding: 20px; border-radius: 10px; .drop-list{ width: calc((100% - 40px) / 2); } a{ &:hover{ text-decoration: underline; } >img{ display: block; margin-bottom: 8px; } } } } #g-nav li:hover>.drop-menu{ opacity: 1; visibility: visible; } /* タグライン */ .tag-line{ width: 100%; height: 100vh; padding-top: 200px; font-family: var(--font_ja); >p{ font-size: clamp(1.5rem, 0.625rem + 3.5vw, 3.25rem); text-align: center; margin: 0 auto; } } /* パーティクル部分 */ canvas{ display: block; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #ebe9d3; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; } #particles-js{ width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: -1; } /* ギャラリー部分 */ .gallery-wrapper{ width: 90%; margin: 100px auto; display: flex; gap: 0 40px; >.photo-box{ width: 66.66%; height: 600px; display: grid; gap: 40px; grid-template-columns: repeat(2,1fr); >p{ >img{ object-fit: cover; width: 100%; height: 100%; } } >p:nth-of-type(1){ grid-row: 1/2; grid-column: 1/2; } >p:nth-of-type(2){ grid-row: 1/3; grid-column: 2/3; } >p:nth-of-type(3){ grid-row: 2/3; grid-column: 1/2; } } >.text-box{ width: 33.33%; padding: 80px 20px 0; >h2{ margin: 0 auto 30px; font-size: 28px; font-family: var(--font_ja); } >.lead{ font-size: 18px; line-height: 1.8; } } } /* 共通部分 */ section{ padding: 150px 10px; >h3{ margin: 50px auto; font-size: 36px; font-family: var(--font_ja); } } /* お知らせ部分 */ .news-wrapper{ width: 80%; margin: 0 auto; >.news-list{ >dt{ margin-bottom: 10px; font-weight: bold; font-size: 18px; padding-left: 20px; >span>a{ background-color: var(--bg_color-1); color: #FFF; font-size: 14px; padding: 6px 8px; margin-left: 20px; } } >dd{ margin-bottom: 50px; border-bottom: 2px solid var(--bg_color-1); padding:0 20px 8px; font-size: 18px; } } } .to-news{ width: 300px; margin: 80px auto; >a{ padding: 12px 0; } } /* サービス部分 */ .service-wrapper{ width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; border: 1px solid var(--text_color); >.service-box{ width: 50%; aspect-ratio: 1/1; padding: 5%; &:nth-of-type(odd){ border-right: 1px solid var(--text_color); } &:nth-of-type(n+3){ border-top: 1px solid var(--text_color); } >h4{ color: var(--service-1); font-size: clamp(1.25rem, 1.01rem + 0.98vw, 1.625rem); margin-bottom: 2em; >span{ font-size: 2em; margin-right: 0.4em; } } &:nth-of-type(2)>h4{ color: var(--service-2); } &:nth-of-type(3)>h4{ color: var(--service-3); } &:nth-of-type(4)>h4{ color: var(--service-4); } >.illust{ width: 60%; aspect-ratio: 1/1; margin: 0 auto 20px; >img{ object-fit: contain; width: 100%; height: 100%; } } .service-text{ line-height: 1.8; } } } /* ピックアップ部分 */ .pick-wrapper{ width: 80%; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 40px; >.pick-box{ width: calc((100% - 40px) / 2); padding: 40px; background-color: #e6e6cc; h4{ font-size: 22px; margin-bottom: 10px; } .pick-text{ line-height: 1.7; margin-bottom: 10px; } ul{ display: flex; justify-content: right; margin: 20px 0; gap: 0 20px; } .to-works{ width: 60%; margin: 0 auto 20px; >a{ padding: 8px 0; } } } } /* rank1のスタイル */ .pick-box[data-rank="1"]{ width: 100%; display: flex; flex-direction: row-reverse; order: 1; >.pick-img{ margin-right: 50px; } } .pick-box[data-rank="2"]{ order: 2; } .pick-box[data-rank="3"]{ order: 3; } /* スクロールアニメーション */ .pick-img{ position: relative; overflow: hidden; width: 100%; aspect-ratio: 16/9; >img{ object-fit: cover; width: 100%; height: 100%; } &::after{ content: ""; width: 100%; height: 100%; background-color: #b3d4fc; position: absolute; top: 0; left: 0; transition: 0.4s 0.2s; } &.scroll::after{ translate: 110% 0; } } /* 利用者の声部分 */ .voice-wrapper{ width: 90%; margin: 0 auto; display: flex; gap: 0 40px; >.voice-box{ width: calc((100% - 80px) / 3); background-color: #edebeb; padding: 20px; display: grid; gap: 16px; grid-template-columns: repeat(2,1fr); >.avatar{ grid-row: 1/3; grid-column: 1/2; } >.voice-name{ grid-row: 1/2; grid-column: 2/3; align-self: flex-end; text-align: right; font-size: 20px; } >.voice-date{ grid-row: 2/3; grid-column: 2/3; text-align: right; } >h4{ grid-row: 3/4; grid-column: 1/3; text-align: center; font-size: 22px; margin-top: 10px; } .voice-text{ grid-row: 4/7; grid-column: 1/3; } } } /* 会社概要部分 */ #about{ width: 100%; height: 100vh; background: url(../img/about.jpg) no-repeat center center/cover; position: relative; scroll-margin-top: 60px; &::after{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-image: linear-gradient(to right, #00000000 0%, #000000cf 60%); /* 方向、スタートの色 スタートの位置、ゴールの色 ゴールの位置 */ } } .about-text{ position: absolute; right: 2%; top: 80px; width: 40%; color: #FFFFFF; z-index: 10; >.about-title{ font-family: var(--font_ja); font-size: 32px; margin-bottom: 30px; } >.about-list{ >dt{ margin-bottom: 6px; } >dd{ margin-bottom: 30px; } } } /* ブログ部分 */ .blog-wrapper{ width: 90%; margin: 0 auto; display: flex; gap: 0 20px; .blog-box{ width: calc((100% - 60px) / 4); h4{ margin-bottom: 6px; font-size: 22px; text-align: center; } .blog-date{ text-align: right; margin-bottom: 6px; } .blog-img{ margin-bottom: 6px; overflow: hidden; >img{ transition: 0.3s; } } >a{ display: block; padding: 16px; transition: 0.4s; &:hover{ box-shadow: 0 0 6px #8a8a8a; img{ scale: 1.2; } } } } } /* お問い合わせへのボタン */ .to-form-wrapper{ width: 100%; height: 50vh; display: flex; >div{ width: 50%; height: 50vh; background: url(../img/catalog.jpg) no-repeat center center/cover; &.to-message{ background: url(../img/to-form.jpg) no-repeat center center/cover; } >a{ display: block; width: 100%; height: 100%; background-color: #000000c8; color: #FFF; display: flex; justify-content: center; align-items: center; transition: 0.3s; &:hover{ background-color: #ffffff90; color: var(--text_color); >p{ border: 2px solid var(--text_color); text-decoration: underline; } } >p{ width: 60%; text-align: center; border: 2px solid #FFF; border-radius: 6px; padding: 10px; >span{ display: block; font-size: 20px; margin-top: 10px; } } } } } footer{ width: 100%; background-color: var(--bg_color-1); >p{ text-align: center; padding: 50px 0; color: #FFF; } >.footer-nav{ background-color: #333; >ul{ display: flex; justify-content: center; height: 100px; align-items: center; gap: 0 20px; a{ color: #FFF; padding: 16px 8px; &:hover{ text-decoration: underline; } } } } } /* worksページ */ .main-img{ max-width: 960px; margin: 140px auto; } .works-page-wrapper{ width: 90%; margin: 100px auto; >h2{ font-size: 34px; margin: 0 auto 50px; } >[type="radio"]:checked+label{ background-color: var(--text_color); color: #FFF; } } /* ラジオボタン */ .works-page-wrapper{ label{ display: inline-block; width: 160px; padding: 15px 10px; background-color: #c6c6c6; margin: 0 10px; text-align: center; cursor: pointer; } label:nth-of-type(2){ background-color: var(--service-1); } label:nth-of-type(3){ background-color: var(--service-2); } label:nth-of-type(4){ background-color: var(--service-3); } label:nth-of-type(5){ background-color: var(--service-4); } [type="radio"]{ display: none; } } /* フィルタリングの指定 */ #btn-ex:checked ~ .works-item-wrapper>.works-box:not([data-category*="cate-1"]){ display: none; animation: filtering 1s; } #btn-in:checked ~ .works-item-wrapper>.works-box:not([data-category*="cate-2"]){ display: none; animation: filtering 1s; } #btn-bim:checked ~ .works-item-wrapper>.works-box:not([data-category*="cate-3"]){ display: none; animation: filtering 1s; } #btn-vr:checked ~ .works-item-wrapper>.works-box:not([data-category*="cate-4"]){ animation: filtering 1s forwards; } @keyframes filtering{ 0%{display: block;} 100%{display: none;} } .works-item-wrapper{ margin-top: 60px; display: flex; flex-wrap: wrap; gap: 40px; .works-box{ width: calc((100% - 40px) / 2); background-color: #dfe1e4; padding: 40px; h3{ font-size: 24px; margin-bottom: 10px; } p{ width: 100%; aspect-ratio: 16/9; margin-bottom: 10px; overflow: hidden; >img{ object-fit: cover; width: 100%; height: 100%; transition: 0.3s; } } ul{ display: flex; gap: 0 16px; a:hover{ text-decoration: underline; } } >a:hover img{ scale: 1.2; } } } /* お問い合わせフォーム */ #form-wrapper{ padding: 100px 10px; >h2{ margin: 0 auto 60px; font-family: var(--font_ja); font-size: 32px; } >dl{ display: flex; max-width: 680px; margin: 0 auto 50px; flex-wrap: wrap; border: 1px solid var(--text_color); >dt{ width: 30%; padding: 20px; font-weight: bold; background-color: #d1d9e7; border-right: 1px solid var(--text_color); &:nth-of-type(n+2){ border-top: 1px solid var(--text_color); } >span{ font-size: 13px; display: block; margin-top: 5px; } } >dd{ width: 70%; padding: 20px; &:nth-of-type(n+2){ border-top: 1px solid var(--text_color); } >label{ display: block; margin-bottom: 10px; >[type="radio"],>[type="checkbox"]{ scale: 1.5; margin-right: 10px; accent-color: #485e76; } } >[type="text"],>[type="email"]{ border: 1px solid var(--text_color); padding: 4px 8px; border-radius: 8px; font-size: 18px; } textarea{ width: 80%; height: 120px; border: 1px solid var(--text_color); padding: 4px 8px; border-radius: 8px; font-size: 18px; } } } } /* ボタンのスニペット */ .button02 button { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; background-color: #cccccc; border-radius: 50vh; } .button02 button::after { content: ''; width: 10px; height: 10px; border-top: 3px solid #333333; border-right: 3px solid #333333; transform: rotate(45deg); } .button02 button:hover { text-decoration: none; background-color: #bbbbbb; }
_forward.scss
//パーシャルファイルをまとめて呼び出す
@forward "mixin";
_mixin.scss
//ブレイクポイントを登録 $tab_point:960px; $sp_point:680px; //mixinを登録 @mixin tab{ @media (max-width:$tab_point){ @content(); } } @mixin sp{ @media (max-width:$sp_point){ @content(); } }
