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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/*inner共通（header内と、contents内で使っています）
---------------------------------------------------------------------------*/
.inner {
	max-width: 1200px;	/*最大幅*/
	margin: 0 auto;
}

/*ヘッダー（サイト名が入ったブロック）

/*ヘッダーブロック*/
.main-header{
	background: url(https://www.petsaloon-megu.jp/blog/wp-content/uploads/2020/06/bg.jpg);	/*背景画像の読み込み*/
}
/*ヘッダーのinnerへの追加設定*/
.main-header .inner {
	position: relative;
	height: 280px;	/*高さ*/
}
/*ヘッダーのinnerへの追加設定（トップページへの追加設定）*/
/*ヘッダーのinnerへの追加設定（トップページへの追加設定）*/
.main-header .inner {
	background: url(https://www.petsaloon-megu.jp/blog/wp-content/uploads/2020/06/mainimg.jpg) no-repeat center center;			/*背景画像の読み込み（古いブラウザ用）*/
	background: url(https://www.petsaloon-megu.jp/blog/wp-content/uploads/2020/06/mainimg.jpg) no-repeat center center /100%;	/*背景写真の読み込み。幅100%。*/
}
/*ロゴ画像の設定*/
.main-header #logo {
  margin: auto;
  padding:40px 0; 
	width: 600px;	/*画像の幅*/
}

.tub-con{
    display: none;
}

/*上部のメインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体の設定*/
#menubar {
	position: absolute;
	bottom: 0px;	/*headerブロックの下から0pxの場所に配置。*/
	left: 3%;		/*headerブロックの左から3%の場所に配置。*/
	width: 94%;		/*幅。上で3%使っているので、右にも同じ3%を残すとすると、残りが94%。*/
}

#menubar ul,
#menubar-s ul{
    list-style-type: none;
}

/*メニュー１個ごとの設定*/
#menubar li {
	float: left;
	width: 20%;	/*メニューの幅。５個にしたいなら、20%にすればOK。*/
}
#menubar li a {
	text-decoration: none;display: block;text-align: center;
	background: #e88800;	/*背景色*/
	border: 2px solid #e88800;	/*枠線の幅、線種、色*/
	border-bottom: none;		/*下の線だけ消す設定*/
	color: #FFF;	/*文字色*/
	border-radius: 10px 10px 0px 0px;	/*角丸の指定。左上、右上、右下、左下への順。*/
	margin-left: 5%;	/*左に空けるスペース。メニュー間の余白になります。*/
	padding: 15px 5px;	/*上下、左右へのメニュー内の余白*/
}
/*１つ目のメニューへの設定*/
#menubar li:first-child a {
	margin-left: 0;	/*左へ空けたスペースをなくす設定。*/
}
/*マウスオン時と現在表示中メニューの設定*/
#menubar li a:hover,
#menubar li.current a {
	background: #fff;	/*背景色*/
	color: #e88800;		/*文字色*/
}
/*スマホ用メニューを表示させない*/
#menubar-s {display: none;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){

/*ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーのinnerへの追加設定*/
.main-header .inner {
	height: 120px;	/*高さ*/
}
/*ヘッダーのinnerへの追加設定（トップページへの追加設定）*/
.main-header .inner {
	height: 250px;	/*高さの再指定*/
}
/*ロゴ画像の設定*/
.tub-con {
    display: block;
    }
    
.main-header #logo {
	position: absolute;
	left: 3%;		/*ヘッダーブロックに対して左から3%の位置に配置*/
	top: 30px;		/*ヘッダーブロックに対して上から40pxの位置に配置*/
	width: 300px;	/*画像の幅*/
  padding: 0;
}

/*スマホ用のコンテンツ非表示*/
.sp-con,.pc-con{
display: none;
}

/*スマホ用メニューブロック*/
#menubar-s {
	display: block;overflow: hidden;
	position: absolute;
	top: 120px;	/*上から120pxの場所に配置*/
	border-top: 1px solid #fff;		/*上の線の幅、線種、色*/
	width: 100%;
	z-index: 10;
	animation-name: menu1;		/*上のkeyframesの名前*/
	animation-duration: 0.5S;	/*アニメーションの実行時間。0.5秒。*/
	animation-fill-mode: both;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}

#menubar-s ul{
    margin:0;
    padding:0;
    }

/*メニュー１個あたりの設定*/
#menubar-s li a {
	display: block;text-decoration: none;
	padding: 15px 10px 15px 20px;	/*上、右、下、左へのメニュー内の余白*/
	border-bottom: 1px solid #fff;	/*下の線の幅、線種、色*/
	background: rgba(0,0,0,0.8);	/*背景色*/
	font-size: 20px;
	color: #fff;	/*文字色*/
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}


/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: absolute;
	top: 30px;	/*上から30pxの場所に配置*/
	right: 3%;	/*右から3%の場所に配置*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #E88800 url(http://xd154932.wp.xdomain.jp/wp-content/uploads/2020/06/icon_menu.png) no-repeat center top/50px;
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #E88800 url(http://xd154932.wp.xdomain.jp/wp-content/uploads/2020/06/icon_menu.png) no-repeat center bottom/50px;
}
    
}

/*画面幅480px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:480px){


/*ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーのinnerへの追加設定（トップページへの追加設定）*/
.main-header .inner {
	height: 200px;	/*高さの再指定*/
}

}

/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

/*ヘッダー（サイト名が入ったブロック）
---------------------------------------------------------------------------*/
/*ヘッダーのinnerへの追加設定*/
.main-header .inner {
	height: 100px;	/*高さ*/
}
/*ロゴ画像の設定*/
.main-header #logo {
	width: 200px;	/*画像の幅*/
}

}

/*店情報 facebookボタン
---------------------------------------------------------------------------*/
.btn-social-long-facebook {
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: #4966a0;
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.btn-social-long-facebook .fab {
  text-shadow: 2px 2px 1px #224282;
  font-size: 30px;
}

.btn-social-long-facebook span {
  /*テキスト*/
  display:inline-block;
  transition: .5s;
  font-size: 18px;
}

.btn-social-long-facebook:hover span {
  /*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}


/*店情報 instagramボタン
---------------------------------------------------------------------------*/
.btn-social-long-insta {
  /*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  height: 50px;/*高さ*/
  width: 190px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  font-size: 25px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.btn-social-long-insta:before {
  /*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-social-long-insta .fa-instagram {
  /*アイコン*/
  font-size: 35px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.btn-social-long-insta span {
  /*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s;
  font-size: 18px;
}

.btn-social-long-insta:hover span {
  /*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}