@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.2
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/



/*---------------------------------------
 * ヘッダーサイト名・descriptionの位置変更2020.6.20
 * ヘッダーの高さ指定
 *---------------------------------------*/

/* スマホビュー */

/* スマホのヘッダー高さ */
.header div.header-in {

}
/* サイト名・サイト説明 */
.logo-text,
.tagline {
	text-shadow: 0.5px 0.5px 0 #e7e6f7; /* 背景が白だからテキストに影を */
}
/* サイト名の位置 */
#header-in {
	position: relative; /* サイト名・descriptionはメイン領域に合わた位置 */
    
}
.logo-text {
	bottom: 410px; /* ヘッダーの下から40px */
	padding: 0;
	text-align: center; /* 中央寄せ */
	position:absolute; /* 位置を強引に決める */
　　top: 50%;
	left: 50%; /* 中央 */
    transform: translate(50%, 50%);
    -webkit-transform: translate(-50%, -10%);
    -ms-transform: translate(-50%, -10%);
	font-weight: bold;
	font-size: 60px; /* =16px */
	width: 300px;
    line-height: 20px;
    text-decoration: none;
}
/* サイト説明の位置；微調整必要 */
.tagline {
	bottom: 200px; /* ヘッダーの下から40px */
	padding: 0;
	text-align: center; /* 中央寄せ */
	position:absolute; /* 位置を強引に決める */
　　top: 50%;
	left: 50%; /* 中央 */
    transform: translate(50%, 50%);
    -webkit-transform: translate(-50%, 50%);
    -ms-transform: translate(-50%, 50%);
	font-weight: bold;
	font-size: 18px; /* =16px */
	width: 300px;
    line-height: 30px;
    text-decoration: none;
	
	padding-right: 2em; /* 右内側余白1文字分 */
}


/* PC閲覧時：タブレットサイズで上書きされるstyle */

@media screen and (min-width: 769px) {
	.header div.header-in {
		min-height: 800px; /* ヘッダーの高さ */
	}
	.logo-text,
	.tagline {
		left: 50%; /* タブレットサイズ左からの位置を決める */
	}
	.logo-text {
		bottom: 200PX; /* ヘッダー下から80px */
	}
	.tagline {
		bottom: 65px; /* 下から65px */
	}
}
/* PC大画面領域だけで上書きされるstyle */
@media screen and (min-width: 1024px) {
	.header div.header-in {
		min-height: 800px; /* ヘッダーの高さ */
	}
	/* メイン領域の位置より */
	.logo-text,
	.tagline {
		left: 50%; /* 左から */
	}
	.logo-text {
		top: 120px; /* サイト名下から */
	
		padding: 0;
	text-align: center; /* 中央寄せ */
	position:absolute; /* 位置を強引に決める */
　　top: 50%;
	left: 50%; /* 中央 */
    transform: translate(50%, 50%);
    -webkit-transform: translate(-50%, -10%);
    -ms-transform: translate(-50%, -10%);
	font-size: 60px; /* =16px */
	width: 300px;
    font-weight: bold;
    line-height: 40px;
    text-decoration: none;
	
	}
	.tagline {
		top: -30px; /* description：下から */
		position:absolute; /* 位置を強引に決める */
		line-height: 40px;
		-webkit-transform: translate(-50%, 45%);
        -ms-transform: translate(-50%, 45%);
        -ms-font-size: 30px; /* =16px */
	}
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}