@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/

.cta-box {
background-color: #D4EDDA;
color: #545454;
padding: 20px;
}

h2 {
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

.tagline {
  font-size: 24px;

}



/*特定ページの投稿日・更新日と著者情報をまとめて消す場合*/
.page-id-17 .date-tags,
.page-id-17 .author-info {
    display: none;
} 
/*必要ならばここにコードを書く*/
.sidebar h3 {
  position: relative;
  padding: 0.2em;
  background: #53AD49;
	color: #FFFFFF
}
.sidebar h3:first-letter {
    font-size: 1.4em; /*最初の文字を1.4文字分に大きく*/
}
.sidebar h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #FFFFFF;
width: 0;
height: 0;
}




/*アピールボタンの文字色変更*/
.appeal-button{
	color: #fff;
}

/*ロゴ降ってくる*/
.logo{
    animation-name:tpdwn;
    animation-duration: 1.2s;
}
@keyframes tpdwn {
from {
    transform: translateY(-200px);
}
to {
    transform: translateY(0);
}
}
/*メニュー下線*/
.navi-in .current-menu-item a {
 border-bottom: 3.5px solid #292929
}
/* ナビメニュー影*/
nav#navi, .menu-header .sub-menu{
box-shadow:0 5px 15px -5px rgba(0,0,0,.8);
}
.menu-header .menu-item:hover{
	 border-bottom:3px solid #292929 !important;/*線の太さ色*/
	    transition: all .3s;/*線が出てくる時間*/
}
.sub-menu .menu-item:hover{
	border-bottom:none !important;
}
/* --- ナビゲーションの表示速度をUP --- */
#navi .navi-in ul>li>a {
    animation-name: fadeIn;
    animation-duration: 0.3s; /* 0.6sから短縮（ふわっと感を速く） */
    animation-fill-mode: forwards;
    filter: opacity(0);
    position: relative;
    z-index: 4;
}

/* 各メニューが順番に出る待ち時間(delay)を短縮 */
#navi .navi-in ul>li:nth-child(1)>a { animation-delay: 0.2s; }
#navi .navi-in ul>li:nth-child(2)>a { animation-delay: 0.3s; }
#navi .navi-in ul>li:nth-child(3)>a { animation-delay: 0.4s; }
#navi .navi-in ul>li:nth-child(4)>a { animation-delay: 0.5s; }
#navi .navi-in ul>li:nth-child(5)>a { animation-delay: 0.6s; }
#navi .navi-in ul>li:nth-child(6)>a { animation-delay: 0.7s; }
#navi .navi-in ul>li:nth-child(7)>a { animation-delay: 0.8s; }
#navi .navi-in ul>li:nth-child(8)>a { animation-delay: 0.9s; }
@keyframes fadeIn {
from {
transform: translateY(20px);
filter: opacity(0);
}
to {
transform: translateY(0px);
filter: opacity(1);
}
}
/*マーカーアニメーション*/
.marker-animation.active{
    background-position: -100% .9em;
}
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, #ff9ece 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, #ff9ece 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, #ff9ece 50%);
    background-image: -o-linear-gradient(left, transparent 50%, #ff9ece 50%);
    background-image: linear-gradient(left, transparent 50%, #ff9ece 50%);
    background-repeat: repeat-x;
    background-size: 200% .9em;
    background-position: 0 .9em;
    transition: all 2s ease;
    font-weight: bold;
}
/*何分で読めますのカスタム*/
.countdown{
position:relative;
background: linear-gradient(transparent 75%, #b2ffb2 75%);
padding: 0.3em;
}
.countdown:after{
content: "";
position:absolute;
top:0;
right:0;
width:0;
height:0;
border-style: solid;
border-color: transparent #fff transparent transparent;
border-width: 25px 15px 25px 0;
}
/*コメント欄カスタム*/
#commentform label{
	display: inline-block;
}

#commentform textarea, #commentform input{
    border: 1px solid #4DD0E1; /* 枠線の色 */
	font-family: Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	border-radius: 4px;
	transition: all .2s ease;
	font-size: 80%;
	
}

#commentform textarea:focus, #commentform input:focus{
	outline: none;
	border: 3px solid #4DD0E1; /* 枠線の色 */
}

#commentform #submit{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
	background-color: skyblue; /* 送信ボタンの背景色 */
	color: white;
	border-radius: 15px;
	height: 40px;
	border: none;
	padding: 0;
	line-height: 40px;
	vertical-align: middle;
	text-align: center;
	transition: all .2s ease;
}


/*必要ならばここにコードを書く*/
.toc .toc-title::before{
	font-family: FontAwesome;
	content: '\f0f6';
	margin-right: .5em;
}


/*目次の中央揃え*/
.toc { 
 margin-left: auto; 
 margin-right: auto; 
}

/* 
 * コンバージョンボタン
 */
.btn-cv {
  padding: .3em 0;
  overflow: hidden;
  position: relative;
}
.btn-cv a {
  border: solid #fff 3px;
  border-radius: 12px;
  box-shadow: 1px 1px 10px 0 #a1a1a1;
  color: #fff;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.3;
  margin: .3em auto;
  padding: 1em 2em .8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;
  vertical-align: middle;
  width: 59%;
}
.btn-cv.is-fz20 a {
  font-size: 16px;
}
.btn-cv a img {
  vertical-align: middle;
}
.btn-cv a:after {
  content: ' ' !important;
}
 
/* ボタン内のアイコン */
.btn-cv a:before {
  content: "\f138";
  font-family: "fontawesome";
  font-weight: normal;
  font-size: 1.1em;
  margin-top: -.6em;
  position: absolute;
  right: 15px;
  top: 50%;
}
.btn-cv a:hover {
  box-shadow: 1px 1px 2px 0 #a1a1a1;
  filter: alpha(opacity=70);
  opacity: .7;
}
 
/* 2つ連続で並べる場合の余白 */
.btn-cv + .btn-cv a {
  margin-top: 0;
}
 
/* 緑ボタン */
.btn-cv a {
  background: #00B300;
}
 
/* 赤ボタン */
.btn-cv.is-red a {
  background: #DF062F;
}
 
/* 青ボタン */
.btn-cv.is-blue a {
  background: #09c;
  background: -webkit-linear-gradient(#09c, #069);
  background: linear-gradient(#09c, #069);
}
 
/* 黒ボタン */
.btn-cv.is-black a {
  background: #666;
  background: -webkit-linear-gradient(#8a8a8a, #666);
  background: linear-gradient(#8a8a8a, #666);
}
 
/* ボタンの光沢 */
.is-reflection a {
  overflow: hidden;
}
.is-reflection a:after {
  -moz-animation: is-reflection 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: is-reflection 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: is-reflection 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: is-reflection 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: is-reflection 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
/* アニメーションを遅延させる */
.is-reflection + .is-reflection a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
 

 




/*通知*/
.notice-area {
text-align: center;
padding: 0.5em;
font-size: 1.02em;
font-weight: bold;

}


/*ContactForm7カスタマイズ*/
/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
	background-color:#E95295;/* オレンジ*/
	border:0;
	color:#fff;
	font-size:1.1em;
	font-weight:bold;
	margin:0 auto;
}

.CF7_btn{
	text-align:center;
	margin-top:20px;
}

.wpcf7-spinner{
	width:0;
	margin:0;
}


/* カラム内の行間エラーを修正 */
.column-wrap .column-2 {
    line-height: 1.9;
}

/* 本文エリア(entry-content)の行間を強制的に広げる */
.entry-content p {
    line-height: 1.9 !important; /* 行間：1.9（ゆったりめ） */
    margin-bottom: 2.0em !important; /* 段落と段落の間：2文字分 */
}


/* 本文の行間を広げて読みやすくする */
p {
    line-height: 1.8; /* 標準より少し広めの設定 */
    margin-bottom: 1.5em; /* 段落と段落の間も少し広げる */
}


/* ナビの表示を速くする（例：0.2秒刻みに変更など） */
#navi .navi-in ul>li>a {
    animation-duration: 0.3s; /* 0.6sから短縮 */
}




 /**
 * ===============================================
 * MediaQuery : スマホ対応
 * ===============================================
 */
@media only screen and (max-width: 767px) {
  /* コンバージョンボタン */
  .btn-cv a {
    font-size: 1.3em;
    margin: 0 auto 1em;
    width: 94%;
  }
}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}