@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.3
*/

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

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

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

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

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

/* スマホビュー */

/* スマホのヘッダー高さ */
.header div.header-in {
min-height: 150px; /* 変更時：以下ほとんど微調整として変更しなきゃダメ */
}
/* サイト名・サイト説明 */
.header .logo-text,
.tagline {
padding: 0;
text-align: left; /* 文字左寄せ */
position:absolute; /* 位置を強引に決める */
left: 40px; /* 左から40pxの位置に */
}
/* サイト名の位置 */
#header-in {
position: relative; /* サイト名・descriptionはメイン領域に合わた位置 */
}
.header .logo-text {
bottom: 40px; /* ヘッダーの下から40px */
}
/* サイト説明の位置；微調整必要 */
.tagline {	/* サブタイトルを右にずらす */
margin-left: 20px !important; /* 追加項目もう少し右にずらす */
bottom: 5px; /* 下から20px */
padding-right: 1em; /* 右内側余白1文字分 */
}


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

@media screen and (min-width: 769px) {
.header div.header-in {
min-height: 500px; /* ヘッダーの高さ */
}
.header .logo-text,
.tagline {
left: 80px; /* タブレットサイズ左からの位置を決める */
}
.header .logo-text {
bottom: 80px; /* ヘッダー下から80px */
}
.tagline {
bottom: 65px; /* 下から65px */
}
}
/* PC大画面領域だけで上書きされるstyle */
@media screen and (min-width: 1024px) {
.header div.header-in {
min-height: 700px; /* ヘッダーの高さ */
}
/* メイン領域の位置より */
.header .logo-text,
.tagline {
left: 120px; /* 左から */
}
.header .logo-text {
top: 550px; /* サイト名下から */
}
.tagline {
top: 610px; /* description：下から */
}
}