@charset "UTF-8";
/* Scss Document */
/* var */
/* size */
/* font-family */
html {
  font-size: 100%;
}

body {
    perspective: 0;
    transform-style: preserve-3d;
    margin: 0;
    padding: 0;
    background-color: #255482;
    overflow-y: scroll;
    overflow-x: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", " メイリオ", Meiryo, Osaka, " ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #EEEEEE;
    font-size: 1em;
}

a {
    color: #C5B49F;
    text-decoration: none;
    font-weight: bold;
}

img {
    width: 100%;
    text-decoration: none;
    vertical-align: bottom;
}
img[alt="キタヒロケット"] {
    max-width: 800px;
    vertical-align: top;
    text-align: center;
}
img[alt="instagram"] {
    width: 40px;
    vertical-align: bottom;
    text-align: center;
	margin: 0 1em;
	background: transparent;
}
img[alt="facebook"] {
    width: 40px;
    vertical-align: bottom;
    text-align: center;
	margin: 0 1em;
	border-radius: 4px;
}

ul {
	display:block;
	list-style: none;
	list-style-position: outside;
	margin: 4em auto;
	padding: 0;
	text-align: center;
}
li {
	font-size: 1.2em;
	display: block;
	text-align: center;
	margin-bottom: 2em;
}
.hero {
	margin: 0 auto;
	background-color: #EB5B36;
	text-align: center;
}

/* btn */
.square_btn{
    display: inline-block;
    position: relative;
    padding: 0.35em 1em;
    background: #668AD8;/*ボタン色*/
    color: #FFF;
    text-decoration: none;
	min-width: 11em;
}

.square_btn:before{
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: -webkit-calc(100% - 16px);
    width: calc(100% - 16px);
    height: 0;
    border: solid 8px transparent;
    border-bottom-color: #8eacec;/*ボタン色より明るめの色に*/
}

.square_btn:active{/*押したとき*/
    padding: 0.32em 0.9em;
    -ms-transform: translateY(-2px);
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.square_btn:active:before{ 
    width: -webkit-calc(100% - 12px);
    width: calc(100% - 12px);
}

.square_btn:active:before{
   top:-12px;
   border-width: 6px;
}

/* *************************************
 * Responsive Grid                            *
 ************************************* */
/* mobile ************* */
p {
  padding: 0 0.5em;
}

#header {
  width: 100%;
  margin: 0;
  padding: 0 0 0 0;
  clear: both;
  float: left;
  display: block;
  text-align: center;
}

#container {
  max-width: 480px;
  margin: 0 auto 0 auto;
  padding: 0;
  clear: none;
  float: none;
  display: block;
}

#main {
  width: 100%;
  margin: 0 0 1.5em 0;
  clear: both;
  float: left;
  display: block;
  text-align: left;
}

#footer {
  width: 100%;
  margin: 0 auto 0 auto;
  padding: 1% 0;
  clear: both;
  float: left;
  color: #C5B49F;
  text-align: center;
  border-top: 2px solid #C5B49F;
}

/* tablet ************* */
@media only screen and (min-width: 481px) {
  #container {
    max-width: 799px;
  }

  #main {
    text-align: left;
    padding: 0;
  }
}
/* PC ***************** */