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

.box6-blue {
	position:relative;/* 配置に関するもの(ここを基準に) */
	padding: 2em 2em 1.7em;	/* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
	margin: 2.5em auto;/*ボックス外側余白*/ 
	background-color: #e6f1f9; /*ボックス背景色*/ 
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/ 
	border-radius:4px;/* ボックス角丸 */
	max-width:600px;/*ボックス横幅*/ 
}
.box6-blue .box-title {
	position: absolute;/* 配置に関するもの(ここを動かす) */
	top: -22px;/* 上から（-22px）移動*/
	left: 30px;/* 左から（30px）移動*/
	padding: 0.2em 2em;/* テープ内側余白*/
	color: #0e7ac4; /* テープ文字色 */
	font-weight: bold;/* テープ文字太さ*/
	font-size:18px;/* テープ文字大きさ*/
	background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ→*/
	box-shadow: 0 0 5px rgba(0,0,0,0.2); /* テープ影*/
	transform: rotate(-3deg);/* テープの傾き*/
}
.box6-blue p{
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

@media (min-width: 400px){
.title-box1{
margin: 3em auto 2.5em;
padding: 40px 25px 5px;
width: 90%;
}
}

@media (max-width: 399px){
.title-box1{
margin: 3.5em auto 2em;
padding: 50px 20px 5px;
width: 100%;
}
}

@media (max-width: 399px){
.title-box1-title{
left: 0!important;
right: 0!important;
text-align: center;
}
}

.title-box1{
position: relative;
color: #333333;/*文字の色*/
}

.title-box1:before {
position: absolute;
content: "";
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #aaaaaa;/*背景色*/
opacity: 0.12;/*背景色の濃さ*/
border-radius: 4px;/*ボックスの角の丸み*/
box-sizing: border-box;
z-index: 0;
}

.title-box1-title{
position: absolute;
line-height: 18px;
font-size: 18px;/*タイトル文字の大きさ*/
color: #ffffff;/*タイトル文字の色*/
background: #57b3ba;/*タイトル部分の背景色*/
left: 20px;/*タイトルの位置（左右）*/
top: -18px;/*タイトルの位置（上下）*/
padding: 10px 15px;/*タイトル部分の大きさ*/
border-radius: 2px;/*タイトル部分の角の丸み*/
letter-spacing: 0px!important;
}