<?php
/*
Template Name: トップページ（TOP）用テンプレート
*/
?>
<!DOCTYPE html>
<html lang="ja"><!-- InstanceBegin template="/Templates/speq_temp.dwt" codeOutsideHTMLIsLocked="false" --><head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FQ5H3JCEF"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-2FQ5H3JCEF');
</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>SPEQ（スペック）｜Design WEB Creative Studio｜神戸・西宮・芦屋でホームページ制作ならウェブ制作会社SPEQ（スペック）へお任せください。</title>
<meta name="description" content="神戸・西宮・芦屋でホームページ制作・デザイン制作のご依頼ならSPEQ（スペック）へお任せください。ロゴ・名刺・チラシ等のDTPグラフィックデザイン制作のご依頼も承ります。" />
<meta property="og:title" content="SPEQ（スペック）｜Design WEB Creative Studio｜神戸・西宮・芦屋でホームページ制作ならウェブ制作会社SPEQ（スペック）へお任せください。">
<meta property="og:description" content="神戸・西宮・芦屋でホームページ制作・デザイン制作のご依頼ならSPEQ（スペック）へお任せください。ロゴ・名刺・チラシ等のDTPグラフィックデザイン制作のご依頼も承ります。" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://speq-design.com/" />
<meta property="og:image" content="https://speq-design.com/img/og_image.jpg" />
<!-- InstanceEndEditable -->
<link rel="icon" type="image/x-icon" href="https://speq-design.com/img/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="https://speq-design.com/img/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://speq-design.com/img/android-chrome-192x192.png">
<meta property="og:site_name" content="SPEQ（スペック）｜Design WEB Creative Studio">
<meta name="keywords" content="ホームページ制作,ホームページ作成,デザイン制作,神戸市,西宮市,芦屋市"/>
<meta name="author" content="SPEQ（スペック）｜Design WEB Creative Studio" />
<meta property="og:locale" content="ja_JP">
<meta name="theme-color" content="#000">
<meta property="og:image:width" content="975" /> 
<meta property="og:image:height" content="390" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Open+Sans&family=Oswald&family=Raleway&family=Roboto&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sawarabi+Mincho" rel="stylesheet">
<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
<link rel="canonical" href="https://speq-design.com/" />
<link rel="SHORTCUT ICON" href="https://speq-design.com/img/favicon.ico">
<script src="https://speq-design.com/js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://speq-design.com/css/opt.css">
<link rel="stylesheet" href="https://speq-design.com/css/common.css">
<link rel="stylesheet" href="https://speq-design.com/css/hover.css">
<link rel="stylesheet" href="https://speq-design.com/css/nav.css">
<!-- InstanceBeginEditable name="head" -->
<link rel="stylesheet" type="text/css" href="https://speq-design.com/css/top.css">
<link rel="stylesheet" href="https://speq-design.com/css/ripples.css" />
<link rel="stylesheet" type="text/css" href="https://speq-design.com/css/swiper.min.css">
<!-- InstanceEndEditable -->
<script src="https://speq-design.com/js/base.js"></script>
<script src="https://speq-design.com/js/fade.js"></script>
<link rel="stylesheet" href="https://speq-design.com/css/animate.min.css">
</head>
<body>
<header>
	<div class="h1-area">
		<h1><a href="https://speq-design.com/"><img src="https://speq-design.com/img/common/h_logo.svg" alt="SPEQ（スペック）｜Design WEB Creative Studio"></a></h1>
	</div>
    <div class="custom-header">
        <div id="nav-toggle">
            <div>
                <span class="toggle"></span>
                <span class="toggle"></span>
                <span class="toggle"></span>
            </div>
        </div>
        <div id="gloval-nav">
            <nav>
                <ul>
					<li><a href="https://speq-design.com/">HOME</a></li>
					<li><a href="https://speq-design.com/about.html">WHO WE ARE</a></li>
					<li><a href="https://speq-design.com/service.html">SERVICE</a></li>
					<li><a href="https://speq-design.com/company.html">COMPANY</a></li>
					<li><a href="https://speq-design.com/newslist/">NEWS</a></li>
					<li><a href="https://speq-design.com/contact/">CONTACT</a></li>
                </ul>
            </nav>
        </div>
	</div>
</header>
<main>
<!-- InstanceBeginEditable name="mainArea" -->	
<div class="ripples">
	<div class="main-box">
		<section class="catch-box">
			<div class="inner animate__animated animate__zoomInRight animate__slow">	
				<h1 class="ha">塵も積もれば山となる</h1>
				<p class="cg">Many small stones can build a mountain...<br>
	Many small stones can...</p>
			</div>
		</section>
		<section class="swipe-box">
			<div class="txtswipe">
				<p></p>
				<ul>
				<li>SPEQ&nbsp;</li>
				<li>Design WEB&nbsp;</li>
				<li>&amp; Engineerling&nbsp;</li>
				<li>Creative Studio&nbsp;</li>
				</ul>
			</div>
		</section>
		<section class="information-box animation_wrap">
			<div class="inner fadeInRight">	
				<h1>information</h1>
				<?php
					$param = array(
					'posts_per_page' => '1',
					'paged' => $paged,
					'post_type' => 'post',
					);
					query_posts( $param );
					if (have_posts() ) :
					while (have_posts() ) :
					the_post();
				?>
				<dl>
					<dt><?php the_time("Y-m-d"); ?></dt>
					<dd><a href="<?php the_permalink(); ?>"><?php echo mb_strimwidth($post->post_title, 0, 40, "..."); ?></a></dd>
				</dl>
        <?php endwhile; endif; ?>
        <?php wp_reset_query(); ?>
				<div class="more-btn"><a href="https://speq-design.com/newslist" class="hvr-ripple-in">learn more</a></div>
			</div>
		</section>
		<section class="about-box bg_p">
			<div class="message-box animation_wrap">
				<div class="inner fadeInUp">
				<h1 class="cg">PROMISE TO BE CREATIVE</h1>
				<p class="txt">SPEQ（スペック）は<br>
					より良いものにするために疎かにせず、とことんモノづくりを楽しんで、<br class="pc_only">
					お客様のご要望を適えるサービス提供を目指します</p>
				<div class="more-btn"><a href="https://speq-design.com/about.html" class="hvr-ripple-in">learn more</a></div>
				</div>
			</div>
		</section>
		<section class="service-box bg_p">
			<div class="inner animation_wrap">
				<div class="img-box fadeInUp">
				<picture>
					<source media="(max-width: 567px)" srcset="img/top/service_img01_sp.jpg"><img src="../../../../img/top/service_img01.jpg" alt="SPEQ WEBSITE">
				</picture>
				</div>
				<div class="service-box_s">
					<div class="service-box01">
					<ul class="animation_wrap">
						<li class="fadeInLeft">
							<dl>
								<dt>Website Creative<span>Webクリエイティブ</span></dt>
								<dd>Web・スマホサイト制作、ランディングページ制作、システム構築</dd>
							</dl>
						</li>
						<li class="fadeInLeft">
							<dl>
								<dt>EC Marketing<span>ECマーケティング</span></dt>
								<dd>ショッピングサイト構築・運営運用補助</dd>
							</dl>
						</li>
						<li class="fadeInLeft">
							<dl>
								<dt>Design<span>デザイン</span></dt>
								<dd>ロゴ、名刺、パンフレット、各種印刷物などプロダクトのデザイン</dd>
							</dl>
						</li>
					</ul>
					<div class="more-btn"><a href="https://speq-design.com/service.html" class="hvr-ripple-in">learn more</a></div>
					</div>
				<div class="service-box02">
					<div class="img fadeInUp"><img src="../../../../img/top/service_img02.jpg" alt="SPEQ ホームページデスク"></div>
				</div>
				</div>
			</div>
		<div class="img-box bg_p">
			<div class="inner">
				<div class="img_left animation_wrap">
					<div class="img01 fadeInRight"><img src="../../../../img/top/service_img03.jpg" alt="SPEQ デザイン"></div>
				</div>
				<div class="img_right animation_wrap">
					<div class="img02 fadeInUp"><img src="../../../../img/top/service_img04.jpg" alt="SPEQ デザイン"></div>
					<div class="img03 fadeInLeft"><img src="../../../../img/top/service_img05.jpg" alt="SPEQ デザイン"></div>
				</div>
			</div>
		</div>
		</section>
		<section class="navi-box2">
	  <div class="serviceBox02">
		  <div class="inner">
			  <ul class="animation_wrap">
			  	<li class="service01 fadeInUp">
					<div class="box01"></div>
					<h2>Website Creative</h2>
					<p class="txt02">Webクリエイティブ</p>
					<p class="txt03">Web・スマホサイト制作、ランディングページ制作、システム構築</p>
					<div class="more-btn"><a href="https://speq-design.com/service.html#service-box01" class="hvr-ripple-in">learn more</a></div>
				</li>
			  	<li class="service02 fadeInUp">
					<div class="box01"><a href="#"></a></div>
					<h2>EC Marketing</h2>
					<p class="txt02">ECマーケティング</p>
					<p class="txt03">ショッピングサイト構築・運営運用補助</p>
					<div class="more-btn"><a href="https://speq-design.com/service.html#service-box02" class="hvr-ripple-in">learn more</a></div>
				</li>
			  	<li class="service03 fadeInUp">
					<div class="box01"><a href="#"></a></div>
					<h2>Design</h2>
					<p class="txt02">デザイン</p>
					<p class="txt03">ロゴ、名刺、パンフレット、各種印刷物などプロダクトのデザイン</p>
					<div class="more-btn"><a href="https://speq-design.com/service.html#service-box03" class="hvr-ripple-in">learn more</a></div>
				</li>
			  </ul>
		  </div>
	  </div>

		</section>
		<section class="navi-box">
			<div class="company-box fadeInUp">
				<h1>COMPANY <span>会社概要</span></h1>
				<p>会社情報などをご紹介しております。</p>
					<div class="more-btn"><a href="https://speq-design.com/company.html" class="hvr-ripple-in">learn more</a></div>
			</div>
			<div class="contact-box fadeInUp">
				<h1>CONTACT US <span>お問合せ</span></h1>
				<p>お見積り依頼やご相談されたい場合は<br class="pc_only">お問合せフォームをご利用ください。
</p>
					<div class="more-btn"><a href="https://speq-design.com/contact/" class="hvr-ripple-in">learn more</a></div>
			</div>
		</section>
	</div>
</div>
<!-- InstanceEndEditable -->
</main>
<footer>
	<div class="inner">
		<div class="logo-Box"><a href="https://speq-design.com/"><img src="https://speq-design.com/img/common/h_logo.svg" alt="SPEQ（スペック）｜Design WEB Creative Studio"></a></div>
		<div class="f_navi">
			<ul>
				<li><a href="https://speq-design.com/contact/">お問合せ</a></li>
				<li><a href="https://speq-design.com/privacy.html">プライバシーポリシー</a></li>
				<li><a href="https://speq-design.com/company.html">会社情報</a></li>
			</ul>
		</div>
			<small>COPYRIGHT &copy; SPEQ DESIGN</small>
	</div>
</footer>
<!-- InstanceBeginEditable name="jsbox" --><script src="https://speq-design.com/js/jquery.ripples-min.js"></script>

<script>
$(".ripples").ripples({
	dropRadius: 20,
	perturbance: 0.01,
	resolution: 580,
	interactive: true,
	crossOrigin: ""
});
</script><!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>