@charset "UTF-8";

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


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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*hタグリセット*/
.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;
}

.font1{
	font-size:22px;
	font-weight:bold;
}

.font2{
	font-size:70%;
}


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


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

/*ヘッダーメニュ―下線*/
.menu-header .menu-item:hover{
border-bottom:6px solid #00d7b5 !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;}
}


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

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




/*ｈ4スタイル*/
.article h4 {
  background: #c2edff;/*背景色*/
  padding: 0.7em;/*文字まわり（上下左右）の余白*/
  margin:0px;
  font-size:24px;
  font-family: "Kosugi Maru","Noto Sans Japanese","游ゴシック","YuGothic","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","Meiryo",sans-serif !important;
}

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

/*TOP背景花*/
.bf{
	margin-top:0.5em;
	width:100%;
	height:auto;
	padding:2em;
	background-image:url(https://poliahu-lico.com/wp-content/uploads/2022/03/e101ad0a60acff7511d3fc36f5f71f6c-1.png);
	background-size:cover;
}

.bf p{
	padding:0 1em;
}


/*TOP背景花*/
.bf2{
	margin-top:0.5em;
	width:100%;
	height:auto;
	padding:2em;
	background-color:#ffffff;
	/*
	background-image:url(https://poliahu-lico.com/wp-content/uploads/2019/09/背景2.png);
	*/
}



/*汎用flexbox*/
/*レッスン開催予定告知に使用*/


/*flexbox 土台*/
contents{
  display: flex;
  justify-content:center;
  /*padding:30px 0;*/
  margin:0px;
  background-color: rgba(255, 255, 255, .7);
/*text-align:center;*/
  flex-wrap: wrap;
}  

/*flexbox中身 カラム*/
.leaf {
  width:400px;
  margin:0px;
　/*padding:2em;*/
  /*text-align:center;*/
  /*background-color: rgba(255, 255, 255, .7);*/
  border:solid 0px;
}


/*レッスン開催予定告知*/
.leaf p {
text-align:center;
/*margin-top:3em;*/
}

.lessnplan1{
margin-top:4em;
}

p .lessnplan2{
margin-top:1em;
}

.lessnplan1{
  font-size:22px;
  font-weight:bold;
  margin-bottom:0px;
}


/*汎用flexbox*/
/*講師写真に使用*/

/*flexbox 土台*/
.koushientire{
  display: flex;justify-content:center;
  padding:30px 0;margin:0px;
/*background-color:#FF9966;*/
/*text-align:center;*/
  flex-wrap: wrap;
}  


/*flexbox中身 カラム*/
.koushi {
  width:300px;
  margin:10px;
  text-align:center;
  background-color: rgba(255, 255, 255, .0);
  padding:15px;
  border:solid 0px;
}


/*ギャラリーフレックスボックス*/
/*動画FromLasvegas*/
/*汎用flexbox*/
/*flexbox 土台*/
.molas{
  display: flex;
  justify-content:center;
  padding:30px 0;
  margin:0px;
  /*background-color:#FF9966;*/
  /*text-align:center;*/
  flex-wrap: wrap;
}  

/*flexbox中身 カラム*/
.molasko{
  width:450px;
  margin:0px;
  background-color: rgba(255, 255, 255, .7);
  padding:15px;
  border:solid 0px;
}

.molasko p{
  text-align:center;
}


/*HulaStely春号*/
/*汎用flexbox*/
/*flexbox 土台*/
.hustsp{
  display: flex;
  justify-content:center;
  padding:30px 0;
  margin:0px;
  /*background-color:#FF9966;*/
  /*text-align:center;*/
  flex-wrap: wrap-reverse;
}  

/*flexbox中身 カラム*/
.hustspko{
  width:450px;
  margin:0px;
  background-color: rgba(255, 255, 255, .7);
  padding:15px;
  border:solid 0px;
}

.hustspko p{
  text-align:center;
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

/*1241px以上*/
@media screen and (min-width: 1241px){
  /*必要ならばここにコードを書く*/
	

/* ｈ2.テープ */
.article h2{
    position:relative;
    margin:0 -1px;
	margin-bottom:0.5em;
	padding:20px;
    font:bold 34px/1.6;
    text-align:center;
    color:#333;
    background:#FFDDFF;
   /* -webkit-transform: rotate(-3deg) skew(-3deg);
    -moz-transform: rotate(-3deg) skew(-3deg);
    -o-transform: rotate(-3deg) skew(-3deg);
    -ms-transform: rotate(-3deg) skew(-3deg);
    transform: rotate(-3deg) skew(-3deg);
    text-shadow:1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
                30px 0 0 0 #FFDDFF,
                -30px 0 0 0 #FFDDFF;*/
}

/*ポジション*/
.test{
position:relative;	
z-index:1; 
text-align:center;
width:100%;
}

.test img {
  position: absolute;
  left:35%;
   top:-350%;
  z-index:-1;
  display:inline-block;
  width:400px;
  height:auto;
}

.test h3{
	font-size:30px;
	margin:5em 4em 0.5em 4em;
	}	
	

/*top 交流イベント*/
.hert p{
	font-size:22px;
}

.hert{
	text-align:center;
}

i{
	color:red;
}
}




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

/* ｈ2.テープ */
.article h2{
    position:relative;
    margin:0 -1px;
	margin-bottom:0.5em;
	padding:20px;
    font:bold 34px/1.6 Arial, Helvetica, sans-serif;
    text-align:center;
    color:#333;
    background:#FFDDFF;
   /* -webkit-transform: rotate(-3deg) skew(-3deg);
    -moz-transform: rotate(-3deg) skew(-3deg);
    -o-transform: rotate(-3deg) skew(-3deg);
    -ms-transform: rotate(-3deg) skew(-3deg);
    transform: rotate(-3deg) skew(-3deg);
    text-shadow:1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
                30px 0 0 0 #FFDDFF,
                -30px 0 0 0 #FFDDFF;*/
}
.font1{
	font-size:16px;
	font-weight:bold;
}
	
.bf p{
	padding:0em;
}
	
/*ポジション*/
.test{
position:relative;	
z-index:1; 
text-align:center;
width:100%;
}

.test img {
  position: absolute;
  left:38%;
   top:-250%;
  z-index:-1;
  display:inline-block;
  width:300px;
  height:auto;
}

.test h3{
	font-size:30px;
	margin:5em 4em 0.5em 4em;

}
/*top 交流イベント*/
.hert p{
	font-size:22px;
}

.hert{
	text-align:center;
}

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

/* ｈ2.テープ */
.article h2{
    position:relative;
    margin:0 -1px;
	margin-bottom:0.5em;
	padding:20px;
    font:bold 34px/1.6 Arial, Helvetica, sans-serif;
    text-align:center;
    color:#333;
    background:#FFDDFF;
   /* -webkit-transform: rotate(-3deg) skew(-3deg);
    -moz-transform: rotate(-3deg) skew(-3deg);
    -o-transform: rotate(-3deg) skew(-3deg);
    -ms-transform: rotate(-3deg) skew(-3deg);
    transform: rotate(-3deg) skew(-3deg);
    text-shadow:1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
                30px 0 0 0 #FFDDFF,
                -30px 0 0 0 #FFDDFF;*/
}
	
/*ポジション*/
.test{
position:relative;	
z-index:1; 
text-align:center;
width:100%;
}

.test img {
  position: absolute;
  left:35%;
   top:-300%;
  z-index:-1;
  display:inline-block;
  width:300px;
  height:auto;
}

.test h3{
	font-size:25px;
    margin:5em 4em 0.5em 4em;

}
/*top 交流イベント*/
.hert p{
	font-size:22px;
}

.hert{
	text-align:center;
}

i{
	color:red;
}
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
	
/* ｈ2.テープ */
.article h2{
    position:relative;
    margin:0 -1px;
	margin-bottom:0.5em;
	padding:20px;
    font:bold 34px/1.6 Arial, Helvetica, sans-serif;
    text-align:center;
    color:#333;
    background:#FFDDFF;
   /* -webkit-transform: rotate(-3deg) skew(-3deg);
    -moz-transform: rotate(-3deg) skew(-3deg);
    -o-transform: rotate(-3deg) skew(-3deg);
    -ms-transform: rotate(-3deg) skew(-3deg);
    transform: rotate(-3deg) skew(-3deg);
    text-shadow:1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
                30px 0 0 0 #FFDDFF,
                -30px 0 0 0 #FFDDFF;*/
}

/*ポジション*/	
.test{
position:relative;	
z-index:1; 
text-align:center;
width:100%;
}

.test img {
  position: absolute;
  left:30%;
   top:-350%;
  z-index:-1;
  display:inline-block;
  width:300px;
  height:auto;
}

.test h3{
	font-size:20px;
	margin:5em 4em 0.5em 4em;

}
/*top 交流イベント*/
.hert p{
	font-size:22px;
}

.hert{
	text-align:center;
}

i{
	color:red;
}
}

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

/* ｈ2.テープ */
.article h2{
    position:relative;
    margin:0 -1px;
	margin-bottom:0.5em;
	padding:20px;
    font:bold 34px/1.6 Arial, Helvetica, sans-serif;
    text-align:center;
    color:#333;
    background:#FFDDFF;
	font-size:16px;
   /* -webkit-transform: rotate(-3deg) skew(-3deg);
    -moz-transform: rotate(-3deg) skew(-3deg);
    -o-transform: rotate(-3deg) skew(-3deg);
    -ms-transform: rotate(-3deg) skew(-3deg);
    transform: rotate(-3deg) skew(-3deg);
    text-shadow:1px 1px 0 rgba(255,255,255,1);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2),
                30px 0 0 0 #FFDDFF,
                -30px 0 0 0 #FFDDFF;*/
}

/*ポジション*/	
.test{
position:relative;	
z-index:1; 
text-align:center;
width:100%;
}

.test img {
  position: absolute;
  left:22%;
   top:-300%;
  z-index:-1;
  display:inline-block;
  width:200px;
  height:auto;
}

.test h3{
	font-size:15px;
	margin:5em 4em 0em 4em;

}
/*top 交流イベント*/
.hert p{
	font-size:16px;
}

.hert{
	text-align:center;
}

i{
	color:red;
}
}