@charset "UTF-8";

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

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



/*アピールエリアのモバイル設定*/
#appeal {
  min-height:300px; /* 最低の高さを300pxに指定 */
}

/*アピールエリアタイトルの背景色・文字色*/
.appeal-content {
	display: none;
}

/*ホバー設定*/
a:hover img{
	opacity: 0.6;
	transition: all 0.8s ease;
}

/*見出し設定　h4*/
.article h4{
	border-top:none;
	border-color:#B8860B;
	background:none;
	padding: 0.7em 0 0.7em 0.5em;
	font-weight: normal;
	
}

/*見出し設定　h3*/

.article h3{
	
background:white;
border-collapse: separate;
border-spacing: 0;
border-top: none;
border-right: none;
border-bottom: none;
border-left: none;
line-height: normal;
}
.article h3 {
  position: relative;
  padding: 0.6em;
  background: #edc258;
	color:white;
}

.article h3:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #edc258;
  width: 0;
  height: 0;
}

/*フッター画像*/
.logo-footer{
	margin:auto;
}


/*メニュー表*/
.flex {
display: flex;
display: -ms-flexbox;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
}

hr.tab-r-line {
position: relative;
top: calc(50% - 1px);
margin: 0 10px;
border: none;
border-top: dotted 2px #CCC;
}

.tab-reader-box2 {
flex: auto;
}

.tab-reader li{
	padding-right:10px;
}

/*イメージを中央揃え、マックス100％*/

.max-img {
	   margin: 0 auto;
		text-align:center;
}

	@media screen and (min-width: 769px) {
  .page .eye-catch,
  .max-img {
    margin-left: -29px;
    margin-right: -29px;
  }
}

@media screen and (max-width: 768px) {
  .page .eye-catch,
  .max-img {
    margin-left: -10px;
    margin-right: -10px;
  }
}


/*news設定*/
.new-entry-card-thumb{
	display: none;
}


slides img{
  background-size: cover;
  min-height: 100vh;
}


.box3-yellow {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:95%; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 0.5em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px solid #B8860B;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-yellow .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #B8860B; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
}
.box3-yellow p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}




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

.logo-header img{
	margin: 0 auto;
}


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

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

}