@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*トップページ文面横余白*/
.rinen {
  margin:0 20% 0;
}
/*アピールエリア文字サイズ
.appeal-message {font-size: 2.5em;}*/

/*スクロールだけで要素を下からfadeIn*/
 .fadein {
  opacity: 0;
  transform : translate(0, 30px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}

/*じんわりfadeIn*/
.fadeIn {
    transition: 1s;
    opacity: 0;
}

.fadeIn.animated {
    opacity: 1;
}


/*ボックスデザイン*/
.box4-green {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px dotted #58be89;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box4-green .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #58be89; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-size: 20px;/* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box4-green p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}
/**記事一覧ラベルカスタマイズbyうぇぶあしびさん**/
.cat-label {
    top: 0;
    left: 10px;
    border: none;
    font-size: 12px;
    color: #fff;
    background-color: #49add1;
    padding: 1px 5px;
    margin: -6px 0 0 0;
    overflow: visible;
}
.cat-label::after { /*右上に小さな三角を作る*/
    position: absolute;
    content: '';
    top: 0;
    right: -6px;
    border: none;
    border-bottom: solid 6px #3089a9; /*小さな三角の色*/
    border-right: solid 6px transparent;
}
/*作業事例ラベル色*/
.cat-label-25 { 
    background: #298942;
}
.cat-label-25::after {
    border-bottom: solid 6px #298942; /*小さな三角の色*/
}

/*トップページの３つの理由フレックスボックス*/
.contents-wrap1 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2rem;
}
.contents-wrap1:nth-child(odd) {
	flex-direction: row-reverse;
}
.contents-text {
	width: 60%; /*flex: 2;*/
}
.contents-img {
	width: 35%; /*flex: 1;*/
}
.contents-text h3 {
        margin-bottom: 2rem;
}
.contents-img img {
	display: block;
	width: 100%;
	height: auto;
}
	
/*記事一覧をふわっと浮かすカスタマイズbyリスブロさん*/
.entry-card-wrap:hover{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: white; 
    transition: all .3s ease;
}
/**全画像リンクのホバー時エフェクト処理byMASA**/
a:hover img{
  opacity: 0.6; /*不透明度*/
  transition: all 0.8s ease; /*アニメーション*/
}

/***** 目次全体デザイン *****/
.toc {
    background:#F9F9F9;
    border:none;
    display:block;
    border-top:5px solid;
    border-top-color: #58be89;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    padding: 15px 20px;
}
/* 目次の文字指定 */
.toc-title {
    text-align:center;
    margin: 0 20px 20px -10px;
    padding-left: -20px;
    font-size: 20px;
    font-weight: 700;
    color: #58be89; /*目次の文字色*/
}
/* 目次のアイコン設定 */
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: "Font Awesome 5 Free";
    content: "\f03a"; /* アイコンを変える場合はここを変更 */
    font-size:20px;
    margin-right:5px;
    color:#FFF; /* アイコンの色 */
    background-color: #58be89; /* アイコンの背景色 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:14px;
}
/* 目次のデザインカスタマイズ */
.toc-content ol {
    padding: 0 0.5em;
    position: relative;
}
.toc-content ol li {
    line-height: 1.5;
    padding: 0.7em 0 0.5em 1.4em;
    border-bottom: dashed 1px silver;
    list-style-type: none!important;
}
/* 目次の各節の先頭にあるアイコンを設定 */
.toc-content ol li:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138"; /* アイコンを変える場合はここを変更 */
    position: absolute;
    left : 0.5em;
    color: #58be89;
    font-weight: bold;
}
.toc-content ol li:last-of-type {
    border-bottom: none;
}
.toc-content .toc-list li {
    font-weight:700; /* h2のみ太文字に */
}
.toc-content .toc-list li li {
    font-weight:normal; /* h3以降の文字サイズを普通に */
}

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

  /*アピールメッセージ欄
.appeal-message {font-size: 1.5em;}
}*/

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  /*トップページ文面横幅*/
.rinen {
	margin:0 5% 0;
}	
  /*アピールエリア
	#appeal .appeal-in{
    min-height: 500px;
  }*/
}

/*751pxスマホ以上は電話起動なし*/
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/*トップページのフレックスボックス*/
	.contents-wrap1,
	.contents-wrap1:nth-child(odd)  {
	flex-direction: column;
	}

	.contents-text,
	.contents-img {
		width: 100%; /*flex: 1;*/
	}

	.contents-text {
		padding: 3rem;
	}

	.contents-text h3 {
	margin-top: 0rem;
}
	
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
/*トップページ文面横余白*/
.rinen {
  margin:0 5% 0;
}	
	#appeal .appeal-in{
    min-height: 500px;
  }
/*アピールメッセージ欄
.appeal-message {font-size: 1.4em;}	
}*/
	
/*ふきだしサイズ*/
.speech-person {
  width: 20%;
  min-width: 20%;
}