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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* 見出しの装飾リセット */
/* H1 */
.article h1{
  border-top:none;
  border-bottom:none;
  border-left:none;
  border-right:none;
  background:none;
  text-align: center;
  margin-top: 20px;
  color: #6c272d;
  }


/* H2 */
.article h2{
  border-top:none;
  border-bottom:none;
  border-left:none;
  border-right:none;
  background:none;
  text-align: center;
  margin-top: 40px;
  margin-bottom:0;
  }
  /* H3 */
  .article h3{
  border-top:none;
  border-bottom:none;
  border-right:none;
  border-left: solid 5px #ffaf58;
  }
  /* H4 */
  .article h4{
  border-top:none;
  border-bottom:none;
  padding: 0;
  }
  /* H5 */
  .article h5{
  border-bottom:none;
  padding: 0;
  }
  /* H6 */
  .article h6{
  border-bottom:none;
  padding: 0;
  }

  /*ヘッダーのロゴ非表示*/
.logo-header {
  display: none;
}

/*本文の背景を透過*/
.main{
  background-color: transparent;
  padding-bottom:0;
}

/*****toppage******/
.top-title{
  text-align: center;
  padding-top:80px;
  margin-bottom:130px;
  color:#6c272d;
  position:relative;
  animation: fadeIn 4s ease 0.5s 1 normal backwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.top-title::before{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url('/wp-content/uploads/2024/08/1-1.png');
  background-size: contain;
  width:100px;
  height:100px;
  margin-left:-100px;
  margin-top:10px;
  animation: blinking 1.5s ease-in-out infinite alternate;
}
.top-title::after{
  content: '';
  position: absolute;
  display: inline-block;
  background-image: url('/wp-content/uploads/2024/08/1-1.png');
  background-size: contain;
  width:60px;
  height:60px;
  margin-top:-70px;
  margin-right:150px;
  animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
	0% {
		opacity: 0;
	}
  40% {
		opacity: 1;
	}
	100% {
		opacity: 1;
	}
}

.fuwari1{
	animation: fuwari 3s ease 0s 1 normal backwards;
}
.fuwari2{
	animation: fuwari 3s ease 0.5s 1 normal backwards;
}
.fuwari3{
	animation: fuwari 3s ease 1.0s 1 normal backwards;
}

@keyframes fuwari {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*下線のアニメーション*/
.under-line{
	position:relative;
	
}

.under-line::before{
	z-index:-1;
	position:absolute;
	content:'';
	background-color:rgba(255,255,50,0.4);
	width:4px;
	height:0.2em;
	top:1.2em;
	left:-5px;
	animation-name:anime;
	animation-duration: 2s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
}

@keyframes anime{
	0%{
		width:0%;
	}
	100%{
		width:105%;
	}
}

/*よくあるお問い合わせ*/
.toggle-button{
	background-color:#eedfdc;
	color:#6c272d;
	border:1px solid #6c272d;
}
.toggle-button:hover{
	background-color:#6c272d;
	color:white;
}

/*講習会一覧*/
a{
	color:#6c272d;
}

/*サイドバー*/
.sidebar {
	background-color:transparent;
	color:#6c272d;
	margin-top:20px;
}

/*スマホヘッダー*/
.mobile-header-menu-buttons{
	background-color:#6c272d;
	color:white;
}

.mobile-menu-buttons .menu-button > a{
	color:white;
}

.map{
	padding:20px;
}

/************************************
** パソコン用のメディアクエリ
************************************/
@media screen and (min-width: 834px){
  /*画面幅*/

  .content-width{
    width:1000px;
    margin:auto;
  }
  
  .image-grid{
    width: 800px;
    margin:auto;
  }
  .top-img{
    width: 250px;
    height: 250px;
    object-fit:cover;	  
  }
	.middle-width{
		width:1100px;
		margin:auto;
	}
  .back-white{
    background-color: white;
    margin-left:-29px;
    margin-right:-29px;
    padding-top:20px;
  }

  .wide-image{
    object-fit: cover;
    overflow: hidden;
    height:300px;
  }

  /*ブログカードの設定*/
  .blogcard-footer, .internal-blogcard-footer{
    display:none;
  }
  .blogcard-thumbnail img, .card-thumb img{
    height:150px
  }

  .zoom-instagram-widget__header-user a{
    color:#6c272d;
  }
	/*ribesjewelryについて*/
  .fade-list{
    animation: fadeIn 1s ease 0.5s 1 normal backwards;
  }
  .list-border{
    background-color: rgba(255,255,255,0.5);
    width:80%;
    padding:20px;
    margin:auto;
    border-top: 2px dashed #6c272d;
    border-bottom: 2px dashed #6c272d;
  }
	.square-img{
		width:400px;
		height:400px;
		object-fit:cover;
	}

}


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


/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  .content-width{
    width:90%;
    margin:auto;
  }
  
  .image-grid{
    width: 80%;
    margin:auto;
	}
  .top-img{
    width: 30vw;
    height: 30vw;
    object-fit:cover;	  
  }
  
.back-white{
    background-color: white;
    margin-left:-16px;
    margin-right:-16px;
    padding-top:20px;
  }

  .wide-image{
    object-fit: cover;
    overflow: hidden;
    height:300px;
  }
	  
  /*ブログカードの設定*/
  .blogcard-footer, .internal-blogcard-footer{
    display:none;
  }
  .zoom-instagram-widget__header-user a{
    color:#6c272d;
  }
	
  .article ul{
		padding-left:0;
	}
  /*ribesjewelryについて*/
  .fade-list{
    animation: fadeIn 1s ease 0.5s 1 normal backwards;
  }
  .list-border{
    background-color: rgba(255,255,255,0.5);
    width:90%;
    padding:20px;
    margin:auto;
    border-top: 2px dashed #6c272d;
    border-bottom: 2px dashed #6c272d;
  }
	.square-img{
		width:45w;
		height:45vw;
		object-fit:cover;
		padding-bottom:0;
	}
  /*ヘッダー非表示*/	
  #header-container {
		display: none;
	}
	
	/*サイドメニュー*/
  #navi-menu-content{
	background-color: #6c272d;
  }
  .menu-drawer a{
	margin-top:10px;
	color:white;
  }

}