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

/*ふわふわした囲み枠*/
.box50 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#fff;/*背景色*/
box-shadow: 0 0 6px 1px #faccbc, 0 0 6px 1px #faccbc inset;/*ふわりとした影*/
border-radius: 30px;
}

/* 白ステッチをつける---------------------------------------------- */
.box51{
margin: 2em auto;
padding:2em;/*内側余白*/
position: relative;
padding:1.5em !important;
z-index: 0;
background-color:#d6e0ea;/*背景色*/
}

.box51:before{
position: absolute;
border: 2px dashed #fff;/*破線の太さ・色*/
content: '';
display: block;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin:5px;
z-index: -1;
border-radius:3px;
}

.page .sns-share,
.page .sns-follow {
  display: none;
}

.comment-form-email,.comment-form-url,.comment-notes{ display:none; }

.comment-form-comment .required {
	display: none;
}

/*対角線ボックス*/
.title-box {
    font-size: 20px;
}
.box-inside {
    font-size: 16px;
}

@media screen and (max-width: 480px){
    .title-box {
	font-size: 16px;
    }
    .box-inside {
	font-size: 14px;
    }
}

/*
 * 対角線 個別ボックスCSS
 */
.s-box {
    border: solid 3px #ed8583;
    margin: 2em 0;
    border-radius: 8px;
}
.s-box .s-box-content {
    padding: 0 1.5em 24px;
}
.s-box .s-box-title {
	display: inline-block;
	position: relative;
	top: -14px;
	left: 10px;
	padding: 0 9px;
	margin: 0 7px;
	background: #fff;
	color: #ed8583;
	font-size: 19px;
	line-height: 1.4;
	font-weight: bold;
}
.s-box .s-box-title:before {
	content: "\f071";
	padding-right: 4px;
	font-family: "Font Awesome 5 Free";
}
/* 
 * ボックス2または4でCSSをコピーしている場合は上記のコードをコピーする必要は無く
 * 以下のコードのみコピーしてください 
 */
.s-box-2 {
    position: relative;
    margin: 2em 0;
    padding: 1.5em 1em;
    border: solid 2px #ffcb8a;
    border-radius: 3px 0 3px 0;
}
.s-box-2:before {
    right: -12px;
    bottom: -12px;
}
.s-box-2:after {
    top: -12px;
    left: -12px;
}
.s-box-2:before, .s-box-2:after {
    position: absolute;
    width: 10px;
    height: 10px;
    border: solid 2px #ffcb8a;
    border-radius: 50%;
    content: "";
}

/*付箋ボックス*/
.sample_box11 {
   width: 260px;/* 紙の横幅 100%にすると全幅表示に */
   padding: 15px;
   margin: 2em auto;
   background: #f7f092;/* 紙の色 */
   color: #000;/* 文字色 */
   box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform:rotate(2deg);
   word-break: break-all;
}
.sample_box11 p {
    margin: 0; 
    padding: 0;
    font-size: 0.9em;
}
.sample_box11_tape {
    width: 50%;
    height: 35px;
    margin: -25px auto 0;
    background: #989898;
    transform: rotate(-3deg);
    opacity: 0.1;
}
.sample_box11_title {
    text-align: center;
    font-size: 1.3em!important;
    margin-top: 10px!important;
}
.sample_box11_subtitle {
    text-align: center;
    font-size: 0.7em!important;
    margin-bottom: 1em!important;
}

/*方眼紙風ボックス original #e1eef5*/
.box-design5 {
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  background-image:  linear-gradient(#f6f6f6 1px, transparent 1px), linear-gradient(to right, #f6f6f6 1px, #fff 1px);
  background-size: 20px 20px;
}