/*
Theme Name: 2017child
Template:   twentyseventeen
Theme URI:  https://wordpress.org/themes/twentyseventeen/
 
Description:   Twenty Seventeen の子テーマ
Author:        Lu.naque
Author URI:    http://lunaque.ene-show.co.jp/
*/

/**********************************************/
/* サイトタイトルのアニメーション */
/**********************************************/
.site-branding-text {
    animation: fadeIn 3s ease 0s 1 normal;
    -webkit-animation: fadeIn 3s ease 0s 1 normal;
}
	@keyframes fadeIn {
		0% {opacity: 0}
    	100% {opacity: 1}
	}
	@-webkit-keyframes fadeIn {
    	0% {opacity: 0}
    	100% {opacity: 1}
	}

/****************************************
    スクロール時にヘッダーに影をつける
*****************************************/

$(window).scroll(function(){

	// カスタムヘッダーの高さを取得
	var masthead_Height = $('#masthead').height();

	// ナビゲーションメニューのセレクタ（.navigation-top）を変数に格納
	var naviTop = $('.navigation-top');

	// ナビゲーションメニューの高さを取得
	var naviTop_Height = naviTop.height();

	// 影をつけるタイミングを調整
	var shadowPoints = ( masthead_Height - naviTop_Height);

		// 影をつける条件分岐
		if($(window).scrollTop() >= shadowPoints ){
				naviTop.css( "box-shadow", "0px 3px 3px 1px rgba(51,48,0,0.4)" );
		}
		else{	naviTop.css( "box-shadow", "none" );
		}
});

/*ナビゲーションメニューのデザイン*/
.site-branding {
	padding: 1.5em 0;
}
.main-navigation a {
	padding: 0 1.25em;
}
.navigation-top {
	background: #3261AB;	
}
.navigation-top a {
	color: #DCEEF7;
}
	
/*画面スクロールボタンのデザイン*/
.menu-scroll-down {
	border-radius: 50%;
	color: #fff;
	width: 47px;
	height: 47px;
	margin-right: 50px;
}
.menu-scroll-down >.icon-arrow-right {
	color: #fff;
}
	
/* 画面スクロールボタンの点滅アニメーション */
.menu-scroll-down {
	background-color: #e74c3c;
  	animation: bg-color 20s infinite;
  	-webkit-animation: bg-color 20s infinite;
}
	@-webkit-keyframes bg-color {
 		0% { background-color: #e74c3c; }
  		20% { background-color: #f1c40f; }
  		40% { background-color: #1abc9c; }
 	 	60% { background-color: #3498db; }
  		80% { background-color: #9b59b6; }
  		100% { background-color: #e74c3c; }
	}
	@keyframes bg-color {
  		0% { background-color: #e74c3c; }
  		20% { background-color: #f1c40f; }
  		40% { background-color: #1abc9c; }
  		60% { background-color: #3498db; }
  		80% { background-color: #9b59b6; }
  		100% { background-color: #e74c3c; }
	}

/****************************************
    ヘッダーの文字を中央に固定　　
*****************************************/

nowDistance = function(){
//alert("アイウエオ");
	// グローバルナビからwindow（画面）の上端までの距離を計測
    var naviUpper = $('.navigation-top').offset().top; 
   
   	// 動かしたいタイトル要素の高さを取得
    var titleBoxHeight = $('.site-branding-text').height();
    
    // 実際に移動させる距離を計算
    var movingDistance = (naviUpper/2-titleBoxHeight/1.5);
    
    // CSSでタイトル要素にマージンを与えて移動させる
    $('.site-branding-text').css({'margin-bottom': movingDistance + "px"});
    $('.menu-scroll-down').css({'top': -naviUpper/2-30 + "px"});
};


// 【レスポンシブ対応】移動したい距離をリアルタイムで取得して反映させる
jQuery(function(){
    nowDistance();
    $(window).resize(nowDistance);
});

/****************************************
    ヘッダーの文字を中央に固定　　
*****************************************/

nowDistance = function(){
//alert("アイウエオ");
	// グローバルナビからwindow（画面）の上端までの距離を計測
    var naviUpper = $('.navigation-top').offset().top; 
   
   	// 動かしたいタイトル要素の高さを取得
    var titleBoxHeight = $('.site-branding-text').height();
    
    // 実際に移動させる距離を計算
    var movingDistance = (naviUpper/2-titleBoxHeight/1.5);
    
    // CSSでタイトル要素にマージンを与えて移動させる
    $('.site-branding-text').css({'margin-bottom': movingDistance + "px"});
    $('.menu-scroll-down').css({'top': -naviUpper/2-30 + "px"});
};


// 【レスポンシブ対応】移動したい距離をリアルタイムで取得して反映させる
jQuery(function(){
    nowDistance();
    $(window).resize(nowDistance);
});

/****************************************
    スクロール時にヘッダーに影をつける
*****************************************/

$(window).scroll(function(){

	// カスタムヘッダーの高さを取得
	var masthead_Height = $('#masthead').height();

	// ナビゲーションメニューのセレクタ（.navigation-top）を変数に格納
	var naviTop = $('.navigation-top');

	// ナビゲーションメニューの高さを取得
	var naviTop_Height = naviTop.height();

	// 影をつけるタイミングを調整
	var shadowPoints = ( masthead_Height - naviTop_Height);

		// 影をつける条件分岐
		if($(window).scrollTop() >= shadowPoints ){
				naviTop.css( "box-shadow", "0px 3px 3px 1px rgba(51,48,0,0.4)" );
		}
		else{	naviTop.css( "box-shadow", "none" );
		}
});