@charset "UTF-8";

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

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

/*見出しデザインリセット*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
	background-color:initial;/*背景色リセット*/
	border:initial;/*上下左右の枠線リセット*/
	border-radius:initial;/*角の丸みリセット*/
}



.article h1 {padding: 1.65rem 2rem;
  background-color: rgba(165, 210, 255, .4);
  background-image:
    linear-gradient(90deg, rgba(165, 210, 255, .3) 50%, transparent 50%),
    linear-gradient(rgba(165, 210, 255, .3) 50%, transparent 50%);
  background-size: 40px 40px;
}



.article h2 {
	  background: #FFFFFF; /*背景色*/
position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

.article h2:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.article h3 {
  border-bottom: solid 3px #dfefff;
  position: relative;
}

h3:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #87ceeb;
  bottom: -3px;
  width: 20%;
}

.article h4 {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  margin-bottom: 1em;
  border-bottom: 3px solid #dfefff;
}
.article h5 {
  font-size: 14px;
  font-weight: bold;
  padding: 10px 20px;
  margin-bottom: 1em;
  border-bottom: 3px dotted #dfefff;
}
.article h6 {
  font-size: 12px;
  font-weight: bold;
  padding: 5px 20px;
  margin-bottom: 1em;
  border-left: 8px solid #dfefff;
}

.highend-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 20px auto;
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 15px;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.highend-table th, .highend-table td {
  border: 1px solid #ddd;
  padding: 12px 18px;
  text-align: left;
}
.highend-table th {
  background-color: #f8f8f8;
  font-weight: 600;
  color: #333;
}
.highend-table tr:nth-child(even) {
  background-color: #fafafa;
}
.highend-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #222;
}


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