@charset "UTF-8";

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

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

.box1-yellow{
	margin: 2em auto; /* ボックスの余白 */
	background: #fef9ed; /* ボックス背景色 */
	border-radius:4px; /* ボックス角丸 */
	max-width:600px; /* ボックス横幅 */
	padding: 3.5em 2em 1.5em; /* ボックス内側余白 */
	position:relative; /* 配置に関するもの(ここを基準に) */
}
.box1-yellow .box-title {
	background: #fdc44f; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	font-weight: bold; /* タイトル文字の太さ */
	font-size: 20px;/* タイトル文字の大きさ */
	padding: 5px;/* タイトル周りの余白 */
	text-align: center;	/* タイトル中央寄せ */
	border-radius: 4px 4px 0px 0px;	/* タイトル角丸 */
	position:absolute;	/* 配置に関するもの(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width:100%;/*横幅最大幅 */
}
.box1-yellow p {
	margin: 0;/* 文字の余白リセット */
	padding: 0; /* 文字の内側余白リセット*/
}

 /*見出し1のカスタマイズ*/
h1 {
  color: #2b2b2b;/*文字色*/
  padding: 0.5em 0;/*上下の余白*/
  border-top: solid 5px #ffa500;/*上線*/
  border-bottom: solid 5px #ffa500;/*下線*/
   background: #ffedab;/*背景色*/
}

 /*見出し2のカスタマイズ*/
.article h2 {
  padding: 0.8em;/*文字周りの余白*/
  color: #2b2b2b;/*文字色*/
  background: #fcd575;/*背景色*/
  border-left: solid 8px #ff8c00;/*左線（実線 太さ 色）*/
}	

 /*見出し3のカスタマイズ*/
.article h3 {
  padding: 0.5em;/*文字周りの余白*/
  color: #010101;/*文字色*/
  background: #eaf3ff;/*背景色*/
  border-bottom: solid 3px #516ab6;/*下線*/
  border-left: solid 8px #1e90ff;/*左線（実線 太さ 色）*/
}	

/* グローバルナビメニュー 文字*/
#navi {
font-weight: bold; /* 太文字 */
	


}	

/************************************
** カルーセルカスタマイズ
************************************/
#carousel .a-wrap{
  margin-top:-6px !important;
  margin: initial;
  padding-top:-10px;
}
#carousel .carousel-entry-card-title{
  display: none;/*タイトル消す*/
}
#carousel .carousel-in {
  background-color: transparent;
}
#carousel .slick-dots{
  display:;
}
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
color: #ffffff;
}

.slick-slide img {
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);/*お好みで*/
}
.carousel-entry-card-thumb {
  width: 95%;
}
.carousel .cat-label {
  display: none;/*カテゴリーを消す*/
}

/************************************
** カルーセルサイドボタンカスタマイズ
************************************/
/*前のページ*/
.slick-prev{
border-radius: 50%; /*角丸*/
background-color: #FFF;
border: none; /*線を消す*/
width: 40px;
height: 40px;
opacity: 0.8; /*透明度*/
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/*前のページマウスオーバー時*/
.slick-prev:hover{
border-radius: 50%;
background-color: #ff8c00;
border: none;
width: 40px;
height: 40px;
}
/*次のページ*/
.slick-next{
border-radius: 50%;
background-color: #FFF;
border: none;
width: 40px;
height: 40px;
opacity: 0.8;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
/*次のページマウスオーバー時*/
.slick-next:hover{
border-radius: 50%;
background-color: #ff8c00;
border: none;
width: 40px;
height: 40px;
}





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

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

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

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