@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Allura&display=swap');

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

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


/*ヘッダー詰める*/
.entry-title,
.content {
padding-top: 0;
margin-top: 0;
}

#main{
Padding-top: 0;
margin-top: 0;
}

/*タイトル、投稿日時、投稿者の非表示*/
.date-tags{
  display: none;
}

/*hタグリセット*/
.article h1 {
    padding: 0;
	margin:0.5em;
    background: none;
}
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

/*ヘッダーのモーション*/
/*ヘッダー太字*/
nav#navi, .menu-header .sub-menu{
font-weight: bold;
}

/*ヘッダーメニュ―下線*/
.menu-header .menu-item:hover{
border-bottom:6px solid #000000 !important;/*線の太さ色*/
transition: all .8s;/*線が出てくる時間*/
}

.sub-menu .menu-item:hover{
border-bottom:none !important;
}

/*ふわっとフェードインするアニメーション*/

#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#sidebar {
    animation: fadeIn 1s ease-out 0s 1 normal;
}

@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}

@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

#breadcrumb {
    animation: Right 1s ease-out 0s 1 normal;
}

@keyframes Right {
    from {transform: translateX(10%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}

/*テーブルthスタイル*/
.tb5 th{
background-color:#ffffcc;
text-align:center;
}

.tb5 td{
background-color:#ffffff;
}

/*ヘッダー背景*/
#navi{ 
background-image: url("https://ongaku219-takako.com/wp-content/uploads/2019/09/1900ヘッダー背景png.png");
}

/*フッター背景*/
#footer {
	background-image: url( "https://ongaku219-takako.com/wp-content/uploads/2019/09/1900ヘッダー背景png.png" );
	background-size: cover;
}


/*SNSボタンデザイン*/
.btn-social-square {
  display: inline-block;
  text-decoration: none;
  width: 50px;
  margin:2px;
  height: 50px;
  line-height: 50px;
  font-size: 23px;
  color:white;
  border-radius: 12px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  transition: .3s;
}
.btn-social-square i {
  line-height:50px;
}
.btn-social-square:hover {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}
.btn-social-square--twitter {
  background: #22b8ff;
}
.btn-social-square--facebook { background: #6680d8; }
.btn-social-square--pocket {
  background: #ff6d82;
}
.btn-social-square--feedly {
  background: #7bda72;
}

/*メインカラムの背景を透過する*/
#main{
width: 100%;
background-color: rgba(255, 255, 255, .0);
}


/*h3*/
.article h3 {
  position: relative;
  padding-left: 1.2em;/*アイコン分のスペース*/
  line-height: 1.4;
}

.article h3:before {
  font-family: "FontAwesome";
  content: "\f00c";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0;/*アイコンの位置*/
  top: 0;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

/*h4*/
.article h4 {
  position: relative;/*相対位置*/
  padding: 0.5em 0.5em 0.5em 1.5em;/*アイコン分のスペース*/
  line-height: 1.4;/*行高*/
  color: #000;/*文字色*/
}

.article h4:before {
  font-family: "FontAwesome";/*忘れずに*/
  content: "\f138";/*アイコンのユニコード*/
  position: absolute;/*絶対位置*/
  font-size: 1em;/*サイズ*/
  left: 0.25em;/*アイコンの位置*/
  top: 0.5em;/*アイコンの位置*/
  color: #5ab9ff; /*アイコン色*/
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1241px以上*/
@media screen and (min-width: 1241px){
/*h1デザイン*/
.article h1{
  text-align: center;
  margin: 0.5em;
  padding-bottom:0px;
  font-size:100px;
  font-family: 'Allura',"Noto Sans Japanese","游ゴシック","YuGothic","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
}

.article h1 {
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
}


/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
/*h1デザイン*/
.article h1{
  text-align: center;
  margin: 0.5em;
  padding-bottom:0px;
  font-size:100px;
  font-family: 'Allura',"Noto Sans Japanese","游ゴシック","YuGothic","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
}

.article h1 {
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
/*h1デザイン*/
.article h1{
  text-align: center;
  margin: 0.5em;
  padding-bottom:0px;
  font-size:100px;
  font-family: 'Allura',"Noto Sans Japanese","游ゴシック","YuGothic","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
}

.article h1 {
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
/*h1デザイン*/
.article h1{
  text-align: center;
  margin: 0.5em;
  padding-bottom:0px;
  font-size:100px;
  font-family: 'Allura',"Noto Sans Japanese","游ゴシック","YuGothic","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
}

.article h1 {
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
/*h1デザイン*/
.article h1{
  text-align: center;
  margin: 0.5em;
  padding-bottom:0px;
  font-size:60px;
  font-family: 'Allura',"Noto Sans Japanese","游ゴシック","YuGothic","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
}

.article h1 {
  color: #DA8E00;
  background: -webkit-linear-gradient(-45deg, #F7DE05, #DA8E00, #EDAC06, #F7DE05, #ECB802, #DAAF08, #B67B03, #DA8E00, #EDAC06, #F7DE05, #ECB802, #EDAC06);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
}