@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){
  /*必要ならばここにコードを書く*/
}




.article h2 {
padding: 0;
background: none;
}


.article h2 {
position: relative;
background-color: #93cbd9;
padding: 30px 30px;
color: #fff;
border-radius: 10px;
box-shadow: 6px 6px 0px 0px #4aa7bf;
}

.article h2:before {
content: "";
position: absolute;
border: 12px solid transparent;
border-top: 12px solid #63dfff;
left: 30px;
bottom: -30px;
border-top: 18px solid #4aa7bf;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}

.article h2:after {
content: '';
position: absolute;
display: block;
width: 0;
height: 0;
left: 22px;
bottom: -15px;
border-top: 16px solid #93cbd9;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}

@import "https://use.fontawesome.com/releases/v5.13.0/css/all.css";

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 62.5%;
}

.btnb,
a.btnb,
button.btnb {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1.5rem 10rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-d {
  font-size: 1.8rem;

  position: relative;

  padding: 3rem 40rem 3rem 40rem;

  -webkit-transition: all 0.3s;

  transition: all 0.3s;

  color: #fff;
  border-radius: 5vh;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#fa4bef),
    to(#ffabfa)
  );
  background-image: -webkit-linear-gradient(left, #fa4bef 0%, #ffabfa 100%);
  background-image: linear-gradient(to right, #fa4bef 0%, #ffabfa 100%);
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
}



a.btn-d:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);

  color: #fff;
}


* 見出し3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}

.article h3{
  
padding: 0.5em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #ffffff;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 1px #7db4e6;/*下線*/
  border-top:none;
  border-right:none;


}


/* 見出し4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

.article h4{
  
padding: 0.5em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #ffffff;/*背景色*/

  border-bottom: solid 3px #7db4e6;/*下線*/
  border-top:none;
  border-right:none;


}



* {
	box-sizing: border-box;
}
.inner {
	margin: 0px auto;
	padding: 15px;
	max-width: calc(720px + (15px * 2));
}

.accordion {
	display: block;
	margin: 15px 0px;
	overflow: hidden;
	border-radius: 10px;
}
.accordion > .accordion__status {
	display: none;
}
.accordion > .accordion__button {
	display: block;
	padding: 10px 20px;
	position: relative;

	color: #979899;
	font-size: 16px;
	font-weight: 500;
	background: #dcfaca;
}
.accordion > .accordion__content {
	display: block;
	padding: 0px 20px;
	height: 0;
	border-left: 1px solid #dcfaca;
	border-right: 1px solid #dcfaca;
	border-bottom: 1px solid #dcfaca;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	transition: all 0.5s ease;
}
.accordion > .accordion__status:checked + .accordion__button + .accordion__content {
	padding: 10px 20px;
	height: auto;
}

/* 左上にずらした背景色ありタイトル */
.box5-4 {
   position: relative; /* タイトルをボックス内の左上に配置するための基準 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   border: 1px solid #CCA99D; /* 枠線の色を設定 */
   border-radius: 5px; /* 角を少し丸めて柔らかい印象に */
}

.box5-4 .box-title {
   background-color: #CCA99D; /* タイトルの背景色 */
   color: #fff; /* タイトルの文字色（白） */
   padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
   position: absolute; /* 親要素（.box5-4）の中で固定配置 */
   top: -0.8em; /* タイトルをボックスの上に少しはみ出させる */
   left: 1em; /* 左側に少し余白を取る */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   font-size: 0.9em; /* タイトルのフォントサイズを設定 */
   border-radius: 5px; /* タイトルの角を丸める */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-4 .box-content {
   padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.box5-4 p {
   margin: 0; /* 段落の余白をなくして統一感を出す */
}
/* タイトル付き（ラベルボックス） */
.box5-2 {
   position: relative; /* タイトルの配置調整のために基準を設定 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   border: 2px solid #CCA99D; /* ボックスの線 (太さ・種類・色) */
}

.box5-2 .box-title {
   position: absolute; /* タイトルをボックス内で絶対位置指定 */
   top: -0.5em; /* 上方向に少し移動 */
   left: 1em; /* 左端からの距離 */
   background-color: #fff; /* タイトル背景色 */
   color: #CCA99D; /* タイトルの文字色 */
   padding: 0 .5em; /* タイトルの内側余白 */
   font-weight: bold; /* タイトルのフォントを太字に */
   line-height: 1; /* タイトルの行の高さ */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-2 .box-content {
   padding: 2em; /* ボックス内コンテンツの余白を設定 */
}

.box5-2 p {
   margin: 0; /* 段落の余白をなくして統一感を持たせる */
}

/* 左上にタイトル（背景色付き） */
.box5-3 {
   position: relative; /* タイトルをボックス内の左上に配置するための基準 */
   margin: 0 auto 2em; /* 外側の余白（上下と中央配置） */
   border: 1px solid #757575; /* 枠線の設定 */
}

.box5-3 .box-title {
   background-color: #757575; /* タイトルの背景色 */
   color: #fff; /* タイトルの文字色（白） */
   padding: 0.1em 1em; /* タイトルの内側余白（上下・左右） */
   position: absolute; /* 親要素（.box5-3）の左上に固定 */
   top: 0; /* 上端に配置 */
   left: 0; /* 左端に配置 */
   display: inline-block; /* タイトルの幅を内容に合わせる */
   font-size: 0.9em; /* タイトルのフォントサイズ */
   width: auto; /* タイトル幅を内容に応じて可変にする */
   max-width: calc(100% - 2em); /* 左右の余白を考慮して最大幅を調整 */
   white-space: nowrap; /* タイトルを1行に固定 */
   overflow: hidden; /* はみ出した部分を非表示 */
   text-overflow: ellipsis; /* 省略記号（...）を表示 */
}

.box5-3 .box-content {
   padding: 3em 2em 2em; /* 上部の余白を多めに確保し、タイトルと本文が重ならないようにする */
}

.box5-3 p {
   margin: 0; /* 段落の余白をなくして統一感を出す */
}