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

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

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

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

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

/*キャッチコピーの位置
.header-in .tagline {
  text-align:left;
  margin-top:20px;
	margin-left:100px;
}*/

/*ヘッダーロゴを左寄せ
.logo{
	text-align:left;
}*/

/* ①アピールエリア */
#appeal {
	height: calc(100vw * calc(200 / 1260));
}

/* ②アピールエリアのアニメーション設定 */
.home #appeal {
	animation : appeal-fadein 0.8s ease-in;
}

/* ③アピールエリアのアニメーション詳細 */
@keyframes appeal-fadein{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*グローバルナビの文字を太字*/
#navi .navi-in{
 font-weight:bold;
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #02c4a6;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}

/*アピールエリアの高さ調整*/
#appeal { 
height: calc(100vw * calc(760 / 1920)); 
}

/*固定ページでタイトルを非表示*/
.entry-title {
  display: none;
}

/*ページの余白　上 右 下 左の順番*/
.entry-content{
	margin: 10px 30px 0px 5px;
}

/* eyecatch画像の非表示 */
.eye-catch {
display: none;
}

/* 見出しのデザイン設定 */
/* H1 */
.entry-content h1{
font-weight:400;
}

/* H2 */
.entry-content h2{
color: #2b2b2b; /* 文字色 */
font-size: 2.0em; /* 文字サイズ */
font-weight:400;
background-color: #ffffff; /* 背景色 */
padding-top:8px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:5px;/* 文字と下部の間隔 */
border-left: solid 7px #02C4A6; /* 左側に実線・色*/
border-bottom:solid 1px #cccccc;
margin-bottom:0px;
}

/* H3 */
.entry-content h3{
color: #2b2b2b; /* 文字色 */
line-height:1.2;
font-size:1.2em;
font-weight:400;
border:none;
border-radius:2px;
border-left:10px solid #02C4A6;/*H3の色の変更はこちら*/
border-bottom:1px solid #cccccc;
padding: 0.4em 0.7em 0.2em;
margin-top:90px;
}

/* H4 */
.entry-content h4{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
font-weight:400;
padding: 10px;
border-top: solid 2px #1eb85f;/* 上側に実線・色 */
border-bottom: solid 2px #1eb85f;/* 下側に実線・色*/
}

/* H5 */
.entry-content h5{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
font-weight:400;
padding: 10px;
border-bottom: dotted 3px #008000;/* 下側に点線・色*/
}

/* H6 */
.entry-content h6{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
font-weight:400;
padding: 5px;
border-left: solid 7px #008000; /* 左側に実線・色*/
}

a{ /*リンクテキスト装飾無し*/
  text-decoration: underline #02c4a6;
  color:#2b2b2b;
}
a:hover { /*リンクテキストホバー時アンダーライン表示*/
  text-decoration: underline #02c4a6;
  color:#2b2b2b;
}

/*マウスオーバーで画像を拡大する*/
.img_wrap{
  /*border: 1px solid #ddd;*/
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;
}
.img_wrap img{
  width: 100%;
  transition-duration: 0.5s;
}
.img_wrap:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

/*フッターロゴサイズ*/
.footer-bottom-logo .logo-image {
	padding: 0;
	max-width: 512px;
	margin-bottom:30px;
}

.footer-bottom-logo img {
	height: 50px;
	width: auto;
}

/* フッターのコピーライトを中央 */
.footer-bottom-content {
  float: none;
  text-align: center;
	
}

/*サイドバーのカスタマイズ*/
.sidebar h2 {
    background-color: #02C4A6;
    padding: 7px 20px;
    margin: 20px 0 5px;
color: #fff;
 border-radius: 4px ;
	font-size: 1em;
}

/*サイドバーのウィジェットの間隔*/
#sidebar .widget {
    margin-bottom: -5px;
}