/* 透過文字メニュー */
/*（※上記のbodyタグよりも下に記述する ＝ 全てに対して有効になる） */
html, body { height: 100%; }
body { position:relative; margin: 0; padding: 0; font: 14px/100% 'Acme', sans-serif; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

h2 { margin: 10px 0 30px; font-size: 48px; font-family: 'Open Sans', sans-serif; letter-spacing: -2px; }
a, a:visited { color: #00f; text-decoration: none; }
a:hover { text-decoration: underline; color: #f00; }
.cover { position: relative; width: 100%; margin: 0; padding: 0; color: #fff; }

.centerBoxFix { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 20px; line-height: 160%; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.centerBoxLast { z-index: -1; }

.centerBox { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 80%; height: 200px; line-height: 160%; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.centerBox i { height: 120px; padding: 20px; font-size: 100px; transition: .8s; transition-delay: 0; } 
.centerBox div { margin: auto; transition: .8s; transition-delay: .8s; }

.section1 { height: 100%; background: url(img/big-sky-img1.jpg) no-repeat; background-size: cover; }
.section2 { height: 100%; background: url(img/subtle_white_feathers.png); color: #00BCD4; }
.section3 { height: 100%; background: url(img/big-sky-img2.jpg) bottom center no-repeat; background-size: cover; }
.section4 { height: 100%; background: #009688;

  background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */

 }
.section5 { position: relative; z-index: -2; height: 100%; background: url(img/big-sky-img3.jpg) no-repeat; background-size: cover; }

#menu-wrap { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; background: rgba(0,0,0,.5); font-family: 'Open Sans', sans-serif; transition: .3s;
}
.logo {
	position: relative;
	top: -5px;
	left: 15px;
 }

#menu { list-style-type: none; max-width: 960px; margin: 0px auto 0px; padding: 0; }
#menu li { width: 14%; float: left; margin: 0; padding: 0; text-align: center; }
#menu li a { display: block; width : 100%; padding: 15px 0; color: #fff; font-size: 13px; line-height: 1; text-decoration: none; transition: .3s; }
#menu li a:hover { background: rgba(0,0,0,.3); }

a.btn{ display: inline-block; width: 150px; margin: 10px 0; padding: 16px 10px; border: 1px solid #fff; background: transparent; color: #fff; text-align: center; text-decoration: none; line-height: 1; transition: .3s; }
a.sample16 { position:relative; z-index:2; overflow:hidden }
a.sample16::after { display:block; content:""; position:absolute; z-index:-1; top:50%; left:50%; width:160px; height:160px; margin:-80px 0 0 -80px; border:65px solid rgba(255,255,255,0);  border-radius:50%; transition:.5s }
a.sample16:hover { color:#555 }
a.sample16:hover::after { border-width: 0; border-color:rgba(255,255,255,1); background:#fff }
#page-top i { position: relative; padding-top: 2px; transition: .2s; }
#page-top:hover i { animation: page-top-animation .1s ease 0s infinite alternate; }
@keyframes page-top-animation {
0% {padding-top: 0px; }
100% {padding-top: 3px; }
}
@media only screen and (min-width: 1023px) {
.section1, .section3, .section5 { background-attachment: fixed; }
}