@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro|Alegreya+Sans:100,300,400);



article, aside, details, figcaption, figure, footer, header, menu, nav, section, main {
	display: block;
	margin: 0;
}

body {
/*	color: #1a1e24;
	font: 13px/1.7 "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	text-align: left;
    background: #fff;
    */
	background-image: url(../img/bg01.jpg);
	background-repeat: no-repeat;
	background-size:cover;
	width: 100%;
	height: 100%;

}




.top-bar {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffb008', endColorstr = '#87ffac');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffb008', endColorstr = '#87ffac')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(left, #ffb008, #87ffac);
background-image: -ms-linear-gradient(left, #ffb008, #87ffac);
background-image: -o-linear-gradient(left, #ffb008, #87ffac);
background-image: -webkit-gradient(linear, left, right, from(#ffb008), to(#87ffac));
background-image: -webkit-linear-gradient(left, #ffb008, #87ffac);
background-image: linear-gradient(left, #ffb008, #87ffac);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
opacity: 0.59;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 59);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 59);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/
}

footer {
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffb008', endColorstr = '#87ffac');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffb008', endColorstr = '#87ffac')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #fff, #87ffac);
background-image: -ms-linear-gradient(top, #fff, #87ffac);
background-image: -o-linear-gradient(top, #fff, #87ffac);
background-image: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#87ffac));
background-image: -webkit-linear-gradient(top, #fff, #87ffac);
background-image: linear-gradient(top, #fff, #87ffac);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
opacity: 0.59;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 59);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 59);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/
}




footer div {
  border-right: 3px solid #fff;
}

footer div:last-child {
  border-right: 0;
}

/* ソーシャルアイコン */
.fi-social-facebook{color:dodgerblue;font-size:2rem;}
.fi-social-youtube{color:red;font-size:2rem;}
.fi-social-pinterest{color:darkred;font-size:2rem;}
.fi-social-instagram{color:brown;font-size:2rem;}
.fi-social-tumblr{color:navy;font-size:2rem;}
.fi-social-twitter{color:skyblue;font-size:2rem;}
.fi-social-google-plus{color:red;font-size:2rem;}
.fi-social-deviant-art{color:#6b8e23;font-size:2rem;}
.fi-social-linkedin{color:darkcyan;font-size:2rem;}
.fi-social-reddit{color:#000;font-size:2rem;}

.small-up-2 .column,.small-up-2 .columns{width:50%;float:left}
.small-up-2 .column:nth-of-type(1n),.small-up-2 .columns:nth-of-type(1n){clear:none}
.small-up-2 .column:nth-of-type(2n+1),.small-up-2 .columns:nth-of-type(2n+1){clear:both}

/******************************

 ソーシャルエリア全体を囲む要素
 * 他のコンテンツと距離を取りたい場合は[margin]を設定

******************************/
.social-area-syncer {
	width: 100% ;
	min-height: 190px ;
	background:  ;	/* 背景色 */
	padding: 1.5em 0 ;
	margin: 20px ;
}

/* デスクトップPCでは高さを拡張する */
@media screen and ( min-width:480px ) {
	.social-area-syncer {
		min-height: 119px ;
	}
}


/******************************

 [ul]要素

******************************/
/* スマホ */
ul.social-button-syncer {
	width: 245px ;
	margin: 24px auto ;
	padding: 0 ;
	border: none ;
	list-style-type: none ;
}

/* デスクトップ */
@media screen and ( min-width:480px ) {
	ul.social-button-syncer {
		width: 415px ;
	}
}


/******************************

 [li]要素

******************************/
ul.social-button-syncer li {
	float: left ;
	text-align: center ;
	height: 71px ;
	margin: 0 8px ;
	padding:0 ;
}


/******************************

 各種ボタン

******************************/
/* [Twitter] */
.sc-tw {
	width: 71px ;
}

.sc-tw svg {
	width: 30px ;
	height: 30px ;
 }

.sc-tw a {
	height: 56px ;
	margin: 0 auto ;
	padding-top: 6px ;
	display: block ;
	background: #1B95E0 ;
	font-size: 12px ;
	color: #fff ;
	font-weight: 700 ;
	text-decoration: none ;
	letter-spacing: .5px ;
	border-radius: 2px ;
}

.sc-tw a:hover {
	color: #fff ;
	background: #0c7abf ;
}

.sc-tw span:before {
	white-space: pre ;
	content: '\A' ;
}

/* [Facebook] */
.sc-fb {
	z-index: 99 ;
	width: 69px ;
}

/* [LINE] */
.sc-li {
	width: 50px ;
}

.sc-li-img {
	border: none ;
	margin: 0 auto ;
	padding:0 ;
	width: 36px ;
	height: 60px ;
}

/* デスクトップPCではLINEボタンを表示しない */
@media screen and ( min-width:480px ) {
	.sc-li {
		display: none ;
	}
}

/* page top */

.pagetop{
	position:fixed;
	margin-left:;
	right:0;
	bottom:70px;
	z-index: 8;

}
.rope_top{
	display:none;
	width:32px;
	height:10px;
	background:url(../img/rope_top.png) no-repeat;
}
.rope{
	width:32px;
	height:0px;
	background:url(../img/rope.png) repeat-y;
	-webkit-animation: ani-rope 0.2s steps(2) infinite;
	-moz-animation: ani-rope 0.2s steps(2) infinite;
	animation: ani-rope 0.2s steps(2) infinite;
}
@-webkit-keyframes ani-rope { 0%{ background-position:0 0;} 100%{ background-position:-64px 0;}}
@-moz-keyframes ani-rope { 0%{ background-position:0 0;} 100%{ background-position:-64px 0;}}
@keyframes ani-rope { 0%{ background-position:0 0;} 100%{ background-position:-64px 0;}}

.ninja{
	display:block;
	width:32px;
	height:32px;
	background:url(../img/ninja.png) no-repeat;
}

.ninja:hover{
	-webkit-animation: ani-ninja 0.6s steps(9,start) forwards;
	-moz-animation: ani-ninja 0.6s steps(9,start) forwards;
	animation: ani-ninja 0.6s steps(9,start) forwards;
}
@-webkit-keyframes ani-ninja{ 0%{ background-position:0 0;} 100%{ background-position:-288px 0;}}
@-moz-keyframes ani-ninja{ 0%{ background-position:0 0;} 100%{ background-position:-288px 0;}}
@keyframes ani-ninja{ 0%{ background-position:0 0;} 100%{ background-position:-288px 0;}}


/* ウイジェット */

.twbox{
    text-align: center;
	width: 100%!important;
}

/* 広告制御（仮） */

.tdftad{
    position: fixed;
    text-align:right;
    right: ;
    bottom: ;
}

/*------------------凍結
.searchbox{
    position: fixed;
    right: 0;
    top: 0;
}
*/






/* メニュー全体のスタイル */
.global-nav {
    position: relative;
    width: 100%;
    height: 60px;
    line-height: 60px;
    max-width: 1000px;
    margin: 0 auto;
}


/* 各メニューのスタイル */
.global-nav p {
    float: left;
    width: 10%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #ffcc99;
    Opacity: 0.45;
    border-radius: 5px 5px 5px 5px;


}
.global-nav p a {
    display: block;
    color: #1c1c1c;
}

/* 選択バーのスタイル */
.global-nav--bar {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 5px;
    background: #ceff9e;
    -webkit-transition: all .5s;
    transition: all .5s;
}

/* ホバーでバーの位置を変化 */
.global-nav p:nth-child(1):hover ~ .global-nav--bar {
    left: 0;
}
.global-nav p:nth-child(2):hover ~ .global-nav--bar {
    left: 10%;
}
.global-nav p:nth-child(3):hover ~ .global-nav--bar {
    left: 20%;
}
.global-nav p:nth-child(4):hover ~ .global-nav--bar {
    left: 30%;
}
.global-nav p:nth-child(5):hover ~ .global-nav--bar {
    left: 40%;
}
.global-nav p:nth-child(6):hover ~ .global-nav--bar {
    left: 50%;
}
.global-nav p:nth-child(7):hover ~ .global-nav--bar {
    left: 60%;
}
.global-nav p:nth-child(8):hover ~ .global-nav--bar {
    left: 70%;
}
.global-nav p:nth-child(9):hover ~ .global-nav--bar {
    left: 80%;
}