https://attic-arcade.co.jp/index.html

1<!DOCTYPE html> 
2<html>
3<head>
4
5<!-- Global site tag (gtag.js) - Google Analytics -->

5
6<script async src="https://www.googletagmanager.com/gtag/js?id=

6UA-143517793-1

6"></script>

7<script>
8  

8window.dataLayer = window.dataLayer || [];
9  function gtag(){dataLayer.push(arguments);}
10  gtag('js', new Date());
11
12  gtag('config', '

12UA-143517793-1

12');

13</script>

13
14
15	<meta charset="utf-8">
16	<meta http-equiv="X-UA-Compatible" content="IE=edge">
17	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
18	<meta name="format-detection" content="telephone=no, email=no, address=no">
19	
20	<title>Attic Arcade inc.</title>
21	<link rel="icon" type="image/x-icon" href="favicon.ico" />
22	<link rel="apple-touch-icon" type="image/png" href="apple-touch-icon.png" />
23	<meta content="Attic Arcade" name="author">
24	<meta name="description" content="アティックアーケードのコーポレートサイト" />
25	<meta name="keywords" content="Attic Arcade, Video Slots" />
26	<meta property="og:title" content="Attic Arcade inc." />
27	<meta property="og:description" content="アティックアーケードのコーポレートサイト" />
28	<meta property="og:type" content="website" />
29	<meta property="og:site_name" content="Attic Arcade inc." />
30	<meta property="og:image" content="https://www.attic-arcade.co.jp/ogp.png" />
31	
32	<!--stylesheets-->
33	<link href="assets/css/normalize.css" media="screen" rel="stylesheet">
34	<link href="assets/libs/slick/slick-theme.css" rel="stylesheet" type="text/css">
35	<link href="assets/libs/slick/slick.css" rel="stylesheet" type="text/css">
36	<link href="assets/libs/drawer/css/drawer.css" rel="stylesheet">
37	<link href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css" rel="stylesheet">
38	<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
39	<link href="assets/css/style.css?20190307-10" rel="stylesheet">
40	<link href="assets/css/style_plus.css?20190530-02" rel="stylesheet">
41	
42	<!--google web font-->
43	<link href="https://fonts.googleapis.com/css?family=Oswald:700|Open+Sans:600|Kaushan+Script" rel="stylesheet">
44	
45</head>
46
47<body id="home" class="home drawer drawer--left" onload="init();">
48
49<div id="splash" class="flex">
50	<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:550px; height:400px">
51		<canvas id="canvas" width="550" height="400" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
52		<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:550px; height:400px; position: absolute; left: 0px; top: 0px; display: block;">
53		</div>
54	</div>
55</div><!-- /splash -->
56
57<div id="wrapper" class="page_animation">
58<div id="wrapper_inner">
59	
60<aside id="nav">
61	<div id="nav_bg"></div>
62	<div id="logo">
63		<a href="index.html">
64			<span class="logo_02"><img src="assets/svg/logo_0001_0002.svg"></span>
65			<span class="logo_03"><img src="assets/svg/logo_0001_0003.svg"></span>
66		</a>
67	</div>
68	<button type="button" class="drawer-toggle drawer-hamburger">
69		<span class="sr-only">toggle navigation</span>
70		<span class="drawer-hamburger-icon"></span>
71	</button>
72	<nav class="drawer-nav flex" role="navigation">
73		<div class="set">
74			<ul id="nav_site">
75				<li><a href="index.html">HOME</a></li>
76				<li><a href="vision.html">OUR VISION</a></li>
77				<li><a href="about.html">ABOUT US</a></li>
78				<li><a href="recruit.html" target="_blank">RECRUIT</a></li>
79				<li><a href="https://forms.gle/UCg4WpBE2r549vt18" target="_blank">CONTACT</a></li>
80			</ul>
81		</div>
82	</nav><!-- /drawer -->
83</aside>
84<ul class="nav-dot">
85	<li class="current" data-nav-href="#hero"></li>
86	<li data-nav-href="#company"></li>
87	<li data-nav-href="#contact"></li>
88</ul>
89<main>

89
90	<section id="hero" data-nav="data-nav">
91		<div class="overlay"></div>
92		<div class="contents">
93			<div class="message">
94				<span class="a">Excitation!</span>
95				<span class="b">Amusement!</span>
96				<span class="c">Captivation!</span>
97				<span class="d">Emotion!</span>
98				<span class="e">Gratulation!</span>
99			</div>
100		</div><!-- contents -->
101		<div class="scroll">
102			<a href="#lead">
103				<div class="txt">SCROLL</div>
104				<div class="mouse"><span></span></div>
105			</a>
106		</div><!-- /scroll -->
107	</section><!-- bg-video-wrap -->
108	<div id="container" class="flex">
109		<div id="area_center">
110			<section id="lead">
111				<div class="lead_inner flex">
112					<div class="txt" data-aos="fade-up">
113						<div class="adjust-box box-1x1">
114							<div class="inner">
115								<dl>
116									<dt>OUR VISION</dt>
117									<dd>
118										<p>
119											日本にはない遊びと興奮を日本に、海外にはない遊びと興奮を海外に
120										</p>
121										<div class="btn pink"><a href="vision.html">VIEW MORE</a></div>
122									</dd>
123								</dl>
124							</div>
125						</div>
126					</div><!-- /txt- -->
127				</div><!-- /inner -->
128			</section><!-- /lead -->
129			<section id="company" data-nav="data-nav">
130				<h1 data-aos="fade-left">COMPANY</h1>
131				<div class="contents flex">
132					<div id="about" class="img-hover">
133						<a href="about.html">
134							<div class="txt flex">
135								<h2 data-aos="fade-left">ABOUT US</h2>
136								<div class="jp" data-aos="fade-left">会社概要</div>
137							</div><!-- /txt -->
138							<div class="img">
139								<div class="inner"></div>
140							</div><!-- /img -->
141						</a>
142					</div><!-- /about -->

143					<div id="recruit" class="img-hover">
144						<a href="recruit.html" target="_blank">
145							<div class="txt flex">
146								<h2 data-aos="fade-left">RECRUIT</h2>
147								<div class="jp" data-aos="fade-left">採用情報</div>
148							</div><!-- /txt -->
149							<div class="img">
150								<div class="inner"></div>
151							</div>
152						</a>
153					</div><!-- /recruit -->
154				</div><!-- /contents -->
155			</section><!-- /company -->
156			<section id="contact" data-nav="data-nav">
157				<h1 data-aos="fade-left">CONTACT</h1>
158				<div class="contents flex">
159					<div class="txt flex">
160						<p data-aos="fade-left">
161							どんな些細なことでも構いません。お気軽にお問合せください。
162						</p>
163						<div class="btn" data-aos="fade-left"><a href="https://forms.gle/UCg4WpBE2r549vt18" target="_blank">CONTACT FORM</a></div>
164					</div><!-- txt -->
165				</div><!-- /contents -->
166			</section><!-- /contact -->
167		</div><!-- /area_center -->
168		<div id="area_right">
169			<div class="txt">
170			</div><!-- /txt -->
171		</div><!-- /area_right -->
172	</div><!-- container -->
173	<div class="pagetop"><a href="#wrapper" class="arrow pt">PAGE TOP</a></div>
174	<footer><div id="copyright">Copyright (c) Attic Arcade inc. all rights reserved.</div></footer>
175</main>
176</div><!-- /wrapper_inner -->
177</div><!-- /wrapper -->
178
179<!-- js common**************************************** -->
180	

181<script
182  src="https://code.jquery.com/jquery-3.4.1.min.js"
183  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
184  crossorigin="anonymous"></script>

184

185<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

185

186<script src="assets/libs/parallax.min.js"></script>

186

187<script src="assets/js/common.js?20190705-03"></script>

187
188	
189<!-- drawer -->

190<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>

190

191<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>

191

192<script src="assets/libs/drawer/js/drawer.min.js" charset="utf-8"></script>

192
193	
194<!-- js page**************************************** -->
195	

196<script src="assets/js/index.js"></script>

196
197	
198<!-- modaal -->

199<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>

199

200<script>
201$('.modaal-video').modaal({
202			type: 'video',
203			accessible_title: 'Video modal title'
204		});
205$('.modaal-image').modaal({
206			type: 'image',
207			accessible_title: 'image modal title'
208		});
209</script>

209
210
211<!-- slick -->

212<script type="text/javascript" src="assets/libs/slick/slick.min.js"></script>

212

213<script>
214$('.slider').slick({
215    autoplay:true,
216    autoplaySpeed:5000,
217    dots:true,
218	arrows:true,
219});
220</script>

220
221
222<!-- splash animation -->
223<style>
224  #animation_container {
225	position:absolute;
226	margin:auto;
227	left:0;right:0;
228	top:0;bottom:0;
229  }
230</style>

231<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

231

232<script src="splash_logo.js?1560243254652"></script>

232

233<script>
234var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
235function init() {
236	canvas = document.getElementById("canvas");
237	anim_container = document.getElementById("animation_container");
238	dom_overlay_container = document.getElementById("dom_overlay_container");
239	var comp=AdobeAn.getComposition("0D80CF5BF27CBC45B0B8DE2BC2B704E1");
240	var lib=comp.getLibrary();
241	var loader = new createjs.LoadQueue(false);
242	loader.addEventListener("fileload", function(evt){handleFileLoad(evt,comp)});
243	loader.addEventListener("complete", function(evt){handleComplete(evt,comp)});
244	var lib=comp.getLibrary();
245	loader.loadManifest(lib.properties.manifest);
246}
247function handleFileLoad(evt, comp) {
248	var images=comp.getImages();	
249	if (evt && (evt.item.type == "image")) { images[evt.item.id] = evt.result; }	
250}
251function handleComplete(evt,comp) {
252	//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
253	var lib=comp.getLibrary();
254	var ss=comp.getSpriteSheet();
255	var queue = evt.target;
256	var ssMetadata = lib.ssMetadata;
257	for(i=0; i<ssMetadata.length; i++) {
258		ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )
259	}
260	exportRoot = new lib.splash_logo();
261	stage = new lib.Stage(canvas);	
262	//Registers the "tick" event listener.
263	fnStartAnimation = function() {
264		stage.addChild(exportRoot);
265		createjs.Ticker.setFPS(lib.properties.fps);
266		createjs.Ticker.addEventListener("tick", stage);
267	}	    
268	//Code to support hidpi screens and responsive scaling.
269	AdobeAn.makeResponsive(true,'both',false,1,[canvas,anim_container,dom_overlay_container]);	
270	AdobeAn.compositionLoaded(lib.properties.id);
271	fnStartAnimation();
272}
273</script>

273
274	
275</body>
276</html>