@charset "UTF-8";

/* /////////////////////////////////////
   Gapplin Style Sheet
   
   author  : 1024jp <wolfrosch.com>
   site    : gapplin.wolfrosch.com 
   target  : top
   lastMod : 2016-03
  ////////////////////////////////////// */


/*___universal_reset_________________________________________________________*/

*      { margin:0; padding:0; background:transparent;
         font-weight:inherit; font-style:inherit }
img    { border:none }
a      { text-decoration:none }
ul li  { list-style:none }


/*___layout__________________________________________________________________*/

body {
	font: 200 16px/1.0 'Helvetica Neue', sans-serif;
	background: hsl(160,10%,98%);
	color: hsl(245,40%,30%);
}

body > header,
body > main,
body > footer {
	max-width: 1000px;
	padding: 20px;
	margin-left:  auto;
	margin-right: auto;
	position: relative;
}
section p {
	line-height: 1.5;
}


/*___header__________________________________________________________________*/

body > header {
	color: white;
	font: 200 14px/1.0 'Helvetica Neue', sans-serif;
	height:40px;
}
body > header p {
	color: hsla(0,0%,100%,.75);
}

body > header h1 {
	font: bold 32px/1.3 'Hiragino Maru Gothic ProN', sans-serif;
	letter-spacing: 0.05em;
}


/*___top________________________________________________________________*/

body::before {
	content: '';
	position: absolute;
	z-index: -1;
	top:   0;
	left:  0;
	right: 0;
	
	background: hsl(245,28%,40%);
	height: 460px;
}

/* top */
section#top {
	margin-top: -40px;
	color: white;
	height: 420px;
}

/* app icon */
section#top figure {
	position: absolute;
	right: 20px;
	top:   20px;
}
section#top figure img {
	width:  384px;
	height: 384px;
}

section#top figure::before {
	content: url('svgfiles');
	position: absolute;
	top:  -60px;
	left: -70px;
}

/* copy */
section#top p#headline {
	font: 100 50px/1.1 'Helvetica Neue', sans-serif;
	letter-spacing: 0.05em;
	text-indent: -1.5em;
	padding-left: 1.5em;
	margin: 60px 0;
}

/* Mac App Store */
#download {
	position: relative;
	margin-top: 140px;
}
#download p {
	font: 21px/1.0 'HanziPen SC', 'Noteworthy';
	letter-spacing: 0.05em;
	-webkit-transform: rotate(-6deg);
	        transform: rotate(-6deg);
	
	display: inline-block;
	position: absolute;
	left: 20px;
	top: -38px;
}
#download p:before {
	content:'↓';
}
#download img {
	background: hsla(0,0%,100%,.2);
	border-radius:5px;
}
#download img:hover {
	background: hsla(0,0%,100%,.4);
}


/*___sections________________________________________________________________*/

main > section + section {
	margin-bottom: 3em;
}

main > section + section h1 {
	font: 28px 'Hiragino Maru Gothic ProN', sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0.8em;
	text-align: center;
}


/* features */
main > section#topics {
	text-align: center;
}
main > section#topics section {
	width: 300px;
	display: inline-block;
	vertical-align: top;
	margin: 0 12px;
}
main > section#topics img {
	margin-bottom: 8px;
}
main > section#topics h2 {
	font-family: 'Hiragino Maru Gothic ProN', sans-serif;
	font-size: 21px;
	font-weight: normal;
	margin-bottom: 0.4em;
}

/* screenshots */
main > section#screenshots {
	text-align: center;
}
main > section#screenshots li,
main > section#screenshots div {
	border: 1px solid hsl(240,20%,20%);
	background: url('../screenshots/background');
	background-size: cover;
}

main > section#screenshots li {
	display: inline-block;
	margin: 20px 10px;
}
main > section#screenshots div {
	color: white;
	position: relative;
	width:  720px;
	height: 450px;
	margin: 0 auto;
}
main > section#screenshots figure figure h2,
main > section#screenshots figure figure p {
	color: hsla(0,0%,100%,.94);
	text-shadow: 0 0 8px hsla(0,0%,0%,.4);
	position: absolute;
	left:  0;
	right: 0;
}
main > section#screenshots figure figure h2 {
	top: 360px;
}
main > section#screenshots figure figure p {
	top: 390px;
}

/* features */
main > section#features dl {
	-webkit-columns: 300px 3;
	   -moz-columns: 300px 3;
	        columns: 300px 3;
}
main > section#features dt {
	font: bold 15px/1.4  'Hiragino Maru Gothic ProN', sans-serif;
	
    -webkit-break-after: avoid;
       -moz-break-after: avoid;
            break-after: avoid;
}
main > section#features dd {
	line-height: 1.4;
	margin-bottom:1em;
}

/*___SNS buttons_____________________________________________________________*/

aside#sns {
	display: block;
	margin: 1em auto;
	height: 20px;
	text-align: center;
}
aside#sns li {
	display: inline-block;
	vertical-align: top;
	margin-right: 10px;
}


/*___footer__________________________________________________________________*/

body > footer {
	font-size: 90%;
	color: hsla(0,0%,0%,.3);
	text-align: center;
}


/*___3.Ajax__________________________________________________________________*/

/* tooltip */
[role=tooltip]  { display:none; position:absolute; z-index:20; padding:0.3em 0.6em;
                  box-shadow:0 2px 5px     hsla(0,0%,  0%,.4),
                             0 0   0   1px hsla(0,0%,  0%,.2) inset,
                             0 1px 1px 1px hsla(0,0%,100%,.1) inset;
                  background:-webkit-linear-gradient(hsla(0,0%,100%,.06), transparent);
                  background:        linear-gradient(hsla(0,0%,100%,.06), transparent);
                  background-color:hsl(0,0%,10%); opacity:0.95; border-radius:3px }
[role=tooltip] div  { height:0; width:0; position:absolute; left:40px; bottom:-17px;
                      border:9px solid transparent; border-top-color:hsl(0,0%,10%);
                      filter:url('filters.svg#dropshadow');
              -webkit-filter:drop-shadow(0px 2px 3px hsla(0,0%,0%,.2)) }
[role=tooltip] p    { color:#eee; text-shadow:0 1px 2px black; line-height:1.2 }
[role=tooltip] span { color:#aaa; text-shadow:none; font-size:92% }
[role=tooltip] p+p  { color:#aaa; text-shadow:none; font-size:80% ;
                      word-wrap:break-word; margin-top:1px;
                      font-family: 'Lucida Grande', sans-serif }
[role=tooltip] p:before  { opacity:0.6; margin-right:5px }
}