@charset "UTF-8";

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

.main {width: 70%;}
.sidebar {width: 27%;}



.side-border{padding: 0 0 0 5px;margin-top:5px;border: 1px #555 solid;border-radius:7px;}






/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
body {
  /* フォントの色 */
  color: #333;
}


.article .pc-itemd {display:block;width: 97%;margin: 20px 0 0 auto;}
.article .mob-itemd {display:none;}

/*/////////////////////////////////////////////////
//LINE風チャット画面(会話方式)を記事に表示する方法
/////////////////////////////////////////////////*/

.line__container {
  padding:0;
  background: #7494c0;
  overflow: hidden;
  max-width: 100%;
  margin: 20px auto;
  font-size: 100%;
}

/* タイトル部分 */
.line__container .line__title {
  background: #273246;
  padding: 10px;
  text-align: center;
  font-size: 150%;
  color: #ffffff;
}

/* 会話部分 */
.line__container .line__contents {
  padding: 10px;
  overflow: hidden;
  line-height: 135%;
  font-size: 100%;
}

.line__container .line__contents .text {
  padding: 10px 0 0 15px;
  margin-bottom: 0.51em;
  line-height: 10%;
}




.line__container .scroll {
/* height: 500px;
  overflow-y: scroll; */
}

/* スタンプ画像最大幅 */
.line__container .stamp img {
  max-width:150px;
}

/* 相手の会話 */
.line__container .line__left {
    min-width: 50%;
    position: relative;
    display: block;
    margin-bottom: 15px;
    max-width: 95%;
    clear: both;
}

/* アイコン画像 */
.line__container .line__left figure {
	 width: 35px;
    position: absolute;
    top: 35px;
    left: 0;
    padding: 0;
    margin: 0;
}

/* 正方形を用意 */
.line__container .line__left figure img{
    border-radius: 50%;
    width: 35px;
    height: 35px;
}

.line__container .line__left .line__left-text {
  margin-left: 55px;
}

.line__container .line__left .line__left-text .name {
  font-size: 80%;
  color: #ffffff;
}

/* コメントエリア */
.line__container .line__left .text {
  margin: 0 0 0 1%;
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background-color: #ffffff;
  width: 100%;
  min-width: 50%;
  margin-bottom: 0.51em;
  line-height: 130%;
  font-size: 90%;
}

/* 吹き出し */
.line__container .line__left .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -10px;
  top: 10px;
  border-right: 20px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  font-size: 80%;
}

/* 自分の会話 */
.line__container .line__right {
    position: relative;
    display: block;
    margin: 5px 1% 5px 1%;
/*	min-width: 50%;
*/    width: 95%;
    float: right;
    margin-right: 4%;
    clear: both;
   font-size: 100%;
}

/* コメントエリア */
.line__container .line__right .text {
  padding: 20px;
  border-radius: 20px;
  background-color: #8de055;
  margin: 0 0 0 9%;
/*  margin-left: 50px;
*/  line-height: 130%;
  font-size: 100%;
}

/* 吹き出し */
.line__container .line__right .text::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -10px;
  top: 10px;
  border-left: 20px solid #8de055;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
/*  font-size: 180%;*/
}

/* 自分がスタンプを送る時 */
.line__container .line__right .stamp {
  position: relative;
  margin-left: 80px;
}

/* 既読エリア */
.line__container .line__right .date {
  content: '';
  position: absolute;
  display: block;
  width: 100px;
  text-align: right;
  left: -30px;
  bottom: 0px;
  font-size: 80%;
  color: #ffffff;
}
.article h3 .choimigi {width:96%;margin-left:3%;}
.article div .choimigi {width:96%;margin-left:3%;}
.article ul .choimigi {width:96%;margin-left:3%;}

.yoko {
	width:90%;
	margin:10px auto;
}
.tate {
	width:60%;
	margin:10px auto;
}


.article h2 {
  font-size: 24px;
  padding: 25px;
  background-color: #f5f6f7;
  border-radius: 2px;
  width: 100%;
  margin: 0 0 20px auto;}
}
.article h3 {
  border-left: 7px solid #888;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 22px;
  padding: 12px 20px;
}

.navi-in a {font-size: 20px;font-weight: 600;}
.article h2,{width: 100%;margin: 0 0 20px auto;}
.article h3, .article h4, .article h5 {width: 100%;margin: 0 0 20px auto;}

.article .jq-item {width: 97%;margin: 0 0 20px auto;display:none;}

.article .jq-itemd ,.article .jq-item {width: 95%;margin: 40px 0 0 auto;}
.article .jq-itemd2 {width: 94%;margin: 20px 0 0 auto;}
.article .jq-item {display:none;}

.article ul li, .article ol li {margin: 0.2em 0.2em 0.62em 0.4em;}

.article .pc-itemd {display:block;width: 97%;margin: 20px 0 0 auto;}
.article .mob-itemd {display:none;}



.side-border{padding: 0 0 0 5px;margin-top:5px;border: 1px #555 solid;border-radius:7px;}

.cat-label {display: none;}
	
.kodomo {margin-top:-15px;margin-bottom:-5px;font-size:14px;}
	
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a, .widget_block ul li a {
    color: var(--cocoon-text-color);
    text-decoration: none;
    padding: 2px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
}

/* ポイント増加 背景色変更  */
.PRate, .s-muryou {
    background:#ff0;
}




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

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

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

.article .pc-itemd {display:none;}
.article .mob-itemd {display:block;width: 98%;margin: 20px 0 0 auto;}

.article h3 .choimigi {width:96%;margin-left:3%;}
.article div .choimigi {width:96%;margin-left:5%;}
.article ul .choimigi {width:96%;margin-left:5%;}
	
	
.article .jq-item {width: 98%;margin: 0 0 20px auto;display:none;}

.article .jq-itemd ,.article .jq-item {width: 98%;margin: 20px 0 20px auto;}
.article .jq-itemd2 {width: 96%;margin: 20px 0 0 auto;}
.article .jq-item {display:none;}

.article .pc-itemd {display:none;}
.article .mob-itemd {display:block;width: 98%;margin: 20px 0 0 auto;}


	
	
}

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