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

/************************************
** 子テーマ用のスタイルを書く
************************************/
.article h2,
.article h3 {
  background: none;
  border: none;
  border-radius: 0;
}

.article h2 {
    color: #616371;/*文字色*/
    font-size: 20px;/*文字サイズ*/
    background-color: #fff;/*背景色（白）*/
    display: block;
    padding: 15px 20px;/*文字回りの余白（上下 左右）*/
    border-left: 3px solid #1c6db0;/*左線（太さ 実線 色）*/
    border-bottom: 3px solid #1c6db0;/*下線（太さ 実線 色）*/
    position: relative;
}
.article h2:before,
.article h2:after {
    content: '';
    height: 0;
    width: 0;
    border: solid transparent;
    position: absolute;
    left: 30px;
}
.article h2:before {
    border-color: transparent;
    border-top-color: #1c6db0;/*吹き出しの矢印部の線色*/
    border-width: 15px;
    top: 100%;
    left: 26px;
}
.article h2:after {
    border-color: transparent;
    border-top-color: #fff;
    border-width: 11px;
    top: 99%;
}
.article h3 {
    color: #616371;/*文字色*/
    font-size: 18px;/*文字サイズ*/
    padding: 20px 20px 10px;
    display: block;
    position: relative;
    padding-left: 25px;
}
.article h3:before {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 0;
    width: 0;
    height: 0;
    border: none;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #1c6db0;/*左矢印部の色など*/
}
.article h3:after {
    position: absolute;
    content: '';
    bottom: -3px;
    left: 10px;
    width: 100%;
    border-bottom: 2px solid #1c6db0;/*下線（太さ 実線 色）*/
}

#main, #sidebar {
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}

/************************************
Top page
************************************/
.top-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	margin-bottom:1em;
}
.top-title:before, .top-title:after {
	border-top: 1px solid;
	content: "";
	width: 3em;
}
.top-title:before {
	margin-right: 1em;
}
.top-title:after {
	margin-left: 1em;
}

.top-button-more {
    max-width: 300px;
    margin: 0 auto;
}
.top-button-more a {
    display: block;
    margin:25px 0;
    padding: 0.8em 1em;
    border-radius: 2em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    background: #264879;
    box-shadow: 0 5px 20px #353535;;
    text-align: center;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    opacity:1;
}
.top-button-more a:hover{
    box-shadow:none;
    transform: translateY(3px);
    opacity:1;
}

/************************************
** Entry cards
************************************/
a.entry-card-wrap.a-wrap.border-element.cf{
	padding:0 0 .5em;
	border-radius:10px;
	width:48%;
}
a.entry-card-wrap.a-wrap{
	transition: all .1s;
}
a.entry-card-wrap.a-wrap:hover {
	transform: translateY(-3px);
	transition: all .1s;
	background-color: #fff;
}
figure.entry-card-thumb.card-thumb.e-card-thumb{
	max-height:250px;
	border-radius:10px 10px 0 0/ 10px 10px 0 0;
	overflow:hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.e-card-thumb .cat-label{
	margin-left:.8em;
}
@media screen and (max-width: 1100px){
	figure.entry-card-thumb.card-thumb.e-card-thumb{
		max-height:220px;
	}
}
@media screen and (max-width: 1023px){
	figure.entry-card-thumb.card-thumb.e-card-thumb{
		max-height:280px;
	}
	a.entry-card-wrap.a-wrap:hover {
		transform: none;
	background-color: #f7f7f7;
	}
}
@media screen and (max-width: 900px){
	figure.entry-card-thumb.card-thumb.e-card-thumb{
		max-height:260px;
	}
}
@media screen and (max-width: 750px){
	figure.entry-card-thumb.card-thumb.e-card-thumb{
	max-height:230px;
	}
}
@media screen and (max-width: 600px){
	figure.entry-card-thumb.card-thumb.e-card-thumb{
		max-height:350px;
	}
	a.entry-card-wrap.a-wrap.border-element.cf{
		margin:0em 1em!important;
	}
	.ect-vertical-card .entry-card-wrap {
		width: 95%!important;
	}
}
@media screen and (max-width: 480px){
	.e-card-thumb .cat-label{
		margin-left:1em;
	}
}
@media screen and (max-width: 1023px){
	div#list a {
		box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
	}
}
@media screen and (min-width: 601px) and (max-width: 834px){
	div#content.content.cf{
		margin:1em;
	}
}
h2.entry-card-title.card-title.e-card-title{
	font-size:18px;
	color:#696969;
	font-weight:bold;
	text-align:center;
	line-height:1.8em;
	margin-top:0.5em;
	margin-bottom:1em;
	padding: 0 1.5em 0;
}
.entry-card-snippet{
	-webkit-line-clamp: unset;
}
.entry-card-snippet.card-snippet.e-card-snippet{
	font-size:14px;
	color:#696969;
	text-align:center;
	border-top:4px dotted #264879;
	line-height:1.8em;
	padding-top:0.6em;
	margin-left:2em;
	margin-right:2em;
	max-height:20em;
}
@media (max-width:834px){
	h2.entry-card-title.card-title.e-card-title{
		font-size: 20px;
		font-weight:bold;
		line-height:1.7em;
		padding: 1em .8em 1em;
		margin:0;
	}
	.entry-card-snippet.card-snippet.e-card-snippet{
		font-size:14px;
		text-align:center;
		border-top:4px dotted #264879;
		line-height:1.8em;
		padding:1em 0.5em 0;
		margin: 0 1em 1em;
	}
	main.main, div.sidebar {
		padding:0;
	}
}
a.entry-card-wrap.a-wrap.border-element.cf .post-date,
a.entry-card-wrap.a-wrap.border-element.cf .post-update{
	margin-right:1.5em!important;
	color:#7b7b7b;
	font-size:1em;
}
.eye-catch .cat-label, .cat-label{
	font-size:.7em;
	border-radius:10px;
	margin:0.5em;
	padding:0 0.5em 0;
	background-color:#264879;
	color:#fff;
}




/************************************
Contents
************************************/
.tab-caption-box-label{ 
	padding: 5px 15px; /*タブ内側余白*/
	font-size: 16px; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 5px 5px 0px 0px;  /*タブ角丸*/
}
.tab-caption-box-label{ 
	padding: 5px 15px; /*タブ内側余白*/
	font-size: 16px; /*タイトル文字の大きさ*/
	font-weight: bold; /*タイトル文字の太さ*/
	border-radius: 5px 5px 0px 0px;  /*タブ角丸*/
}
.tab-caption-box-content {
	position: relative; 
	border: 2px solid;
	padding: 16px 10px; /*ボックス内側余白*/
	border-radius: 5px; /*ボックス角丸*/
	border-top-left-radius: 0px; /*ボックス左上角丸*/
}
.tab-caption-box-content p{
	padding-left: 0.5rem;
	margin: 0;
}
.tab-caption-box-content li { 
	list-style: none;
  	position: relative;
   	margin:0.25em 0;
   	padding-left: 24px;
	margin-top: 0.25m;
}
.tab-caption-box-content li::before{
	font-family: "Font Awesome 5 Free";
	content: "\f00c"; /*アイコン*/
	font-weight: 900;
   	color:  #00d084; /* 色 */
   	position: absolute;
   	left:0;
}


.paper-box {
  background: #f5faff;
  padding: 20px;
  border-radius: 10px;
  margin: 32px 0;
}
.paper-box summary {
	border-left: 6px solid #42a5f5;
}
.paper-box summary::before {
  content: "あああああ";
  position: absolute;
  background: #42a5f5;
  padding: .4rem .8rem;
  top: -32px;
  left: -4px;
  color: #000;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: .1rem;
}


/************************************
Contact
************************************/
input[type="submit"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 20px;
  font-weight: bold;
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background-color: #264879;
  border: none;
  color: #fff;
  cursor: pointer;
}
span.wpcf7-spinner {
  display: none;
}

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

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

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