@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

/************************************
** 基本設定（General Setting）
************************************/
.article {
  font-size: 18px;
  line-height: 1.8;
}

.article p 					{ padding: 1rem 0.5rem 1rem;}
.article p.post-meta 		{ padding: 0;}

.article p strong 		{ background: linear-gradient(transparent 80%, #7ecef4 0%);}


a {
    color: #0066cc;
}


/************************************
** 見出し（H1-6）
************************************/

.article h1,
.article h2 {
}

.article h1 {
  margin-top:30px;
  margin-bottom: 2rem;
  font-size: 28px;
  line-height: 1.5;
}

.article h2 {
position: static;
background-color: #f7f7f7;
margin: 6rem 0 2rem 0;
padding: 1rem;
font-size: 24px;
border-left: 5px solid #f89174;
border-bottom: 3px solid #dadada;
}






/************************************
** レイアウト（Layout）
************************************/

#body{
margin-top: 0px;
background-color: #f7f7f7;
}

#main {
  float: left;
  box-sizing: border-box;
  width: 740px;
  padding: 20px 40px;
  /*border: 1px solid #ddd;*/
 border: 0;
  background-color:#fff;
  border-radius: 4px;
  margin-bottom: 30px;
  position: relative;
}

#sidebar {
float: right;
width: 320px;
margin-bottom: 30px;
background-color: #fff;
padding: 0 20px;
box-sizing: border-box;
}

/************************************
** サイドバー（Sidebar）・ウィジェットなど
************************************/


#sidebar li{
margin-bottom: 8px;
font-size: 15px;
}




/* mokuji01 */
.mokuji01 {
border: #f89174 5px solid;
margin-bottom: 3rem;
}

.mokuji01 .mokujiTitle {
background-color: #f89174;
color: #fff;
font-size: 20px;
padding: 0.2rem 1rem;
}

.mokuji01 ul {
padding: 2rem 1rem 1rem 3rem;
margin: 0;
}

.mokuji01 ul li {
padding: 0 0 1rem 0;
margin: 0;
}


/* list */
/* listNodisc */
ul.list,
ol.list 					{ padding: 1.5rem 1rem 1rem 3rem;}
	

ul.list,
ol.list 					
{
border: #61cef4 1px dotted;
background-color: #e7f5fd;
}

ul.list li  				{ list-style: disc;}
ol.list li  				{ list-style: decimal;}

ul.list li,
ol.list li 					{
padding: 0 0 0.5rem 0;
}

/* example */
.example
{
border: #999 1px dotted;
background-color: #fcfcfc;
padding: 2rem;
}

/* preview */
.preview {
font-size: 15px;
padding: 2rem;
background-color: #fcfcfc;
outline: 1px solid #eee;
border-color: #f0f0f0;
text-align: left;
margin: 0 0 2rem 0;
margin-bottom: 3rem;
color: #444;
}

.preview p { padding: 1rem 0.5rem 1rem;}




/* 
definition 定義リスト(共通))
--------------------------------------- */
.definition dl {
border-radius: 0.5rem;
padding: 3rem 1rem 1rem 0;
/*position: relative;*/
}

.definition dl dt {
display: block;
/*
position: absolute;
top: -1rem;
left: 1rem;
*/

margin: -4rem 0 1.5rem 0.5rem;
}

.definition dl dt span.head {
display: inline-block;
font-size: 20px;
padding: 0.7rem 2rem;
line-height: 1.3;
color: #fff;
border-radius: 2rem;
text-align: left;
}

.definition dl dd {
position: relative;
padding-left: 1.5rem;
margin-left: 1.5rem;
margin-bottom: 1rem;
}

.definition dl dd:before {
content: "";
display: block;
top: 0.9rem;
left: 0;
position: absolute;
width: 0;
height: 0;
margin-top: -6px;
border-style: solid;
border-width: 5px 0 5px 10px;
z-index: 11;
}

/* definition 定義リスト オレンジ */
.definition dl {
border: 3px solid #f8a229;
background: #fffaf2;
}

.definition dl dt span.head {
background: #f8a229;
}

/* definition 定義リスト 青 */
.definition dl.blue {
border: 3px solid #4ac5ca;
background: #fffaf2;
}

.definition dl.blue dt span.head {
background: #4ac5ca;
}

/* definition 定義リスト 紫 */
.definition dl.purple {
border: 3px solid #886ea6;
background: #fffaf2;
}

.definition dl.purple dt span.head {
background: #886ea6;
}

/* definition 定義リスト グレー */
.definition dl.gray {
border: 3px solid #888888;
background: #fffaf2;
}

.definition dl.gray dt span.head {
background: #888888;
}



/* 中央寄せブロック 1カラム */
.blockCenter_1column {
text-align: center;
}

.blockCenter_1column .twitter-tweet,
.blockCenter_1column .twitter-tweet-rendered {
width: 100%;
margin: 0 auto;
}
	
/* 中央寄せブロック 2カラム 各中央寄せ */
.block_Center_2column {
	
}


/************************************
** 関連記事（Relation）
************************************/
.related-entry-thumbnail {
	min-height: 250px;
    width: 160px;
    margin-right: 5px;
}

.related-entry-title {
font-size: 13px;
line-height: 1.5;
text-align: left;
}


/************************************
** TOPへ戻るボタン（Go to top）
************************************/
#page-top{
  position:fixed;
  display:none;
  right: 10px;
  bottom: 80px;
}

#page-top a{
  color:#fff;
  padding:7px;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  background-color: #aaa;
  line-height:100%;
  border-radius: 4px;
  font-size:11px;
}




/* 文字色
------------------------------------------*/

.article p 					{ color: #444;}

.article h2,
.article h3,
.article p strong,
.mokuji01 ul li,
ul.list li,
ol.list li
							{ color: #111;}



div.notes 					{ font-size: 12px; color: #666; line-height: 1.5 !important; word-wrap: break-word;}




/*--------------------
 吹き出しを作る
--------------------*/
.balloon {
margin-bottom: 2em;
position: relative;
}
.balloon:before,.balloon:after {
clear: both;
content: "";
display: block;
}
.balloon figure {
width: 60px;
height: 60px;
}
.balloon-image-left {
float: left;
margin-right: 20px;
}
.balloon-image-right {
float: right;
margin-left: 20px;
}
.balloon figure img {
width: 100%;
height: 100%;
border: 1px solid #aaa;
border-radius: 50%;
margin: 0;
}
.balloon-image-description {
padding: 5px 0 0;
font-size: 10px;
text-align: center;
}
.balloon-text-right,.balloon-text-left {
position: relative;
padding: 10px;
border: 1px solid;
border-radius: 10px;
max-width: -webkit-calc(100% - 120px);
max-width: calc(100% - 120px);
display: inline-block;
}
.balloon-text-right {
border-color: #aaa;
}
.balloon-text-left {
border-color: #aaa;
}
.balloon-text-right {
float: left;
}
.balloon-text-left {
float: right;
}
.balloon p {
margin: 0 0 20px;
}
.balloon p:last-child {
margin-bottom: 0;
}
/* 三角部分 */
.balloon-text-right:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #aaa;
top: 15px;
left: -20px;
}
.balloon-text-right:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-right: 10px solid #fff;
top: 15px;
left: -19px;
}
.balloon-text-left:before {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #aaa;
top: 15px;
right: -20px;
}
.balloon-text-left:after {
position: absolute;
content: '';
border: 10px solid transparent;
border-left: 10px solid #fff;
top: 15px;
right: -19px;
}
/* 考え毎 */
.think .balloon-text-right,.think .balloon-text-left {
border-radius: 30px;
}
.think .balloon-text-right:before {
border: 1px solid #aaa;
border-radius: 50%;
width: 8px;
height: 8px;
top: 15px;
left: -12px;
}
.think .balloon-text-right:after {
border: 1px solid #aaa;
border-radius: 50%;
width: 4px;
height: 4px;
top: 20px;
left: -19px;
}
.think .balloon-text-left:before {
border: 1px solid #aaa;
border-radius: 50%;
width: 8px;
height: 8px;
top: 15px;
right: -12px;
}
.think .balloon-text-left:after {
border: 1px solid #aaa;
border-radius: 50%;
width: 4px;
height: 4px;
top: 20px;
right: -19px;
}
