@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP:900|Open+Sans&display=swap');

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");

body {
	  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", 'Open Sans', "Arial", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", Hiragino Sans, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, "メイリオ", 'Noto Sans JP', Verdana, Meiryo, "M+ 1p", sans-serif;
-webkit-font-feature-settings: "pkna" ;

}

p {
	margin-bottom: 2.4rem !important;
	line-height: 1.8 !important;
}

p a {
	font-weight: bold;
	text-decoration: underline;
}

.addbox1{
	   position: relative;
    padding: 0.5em 1em;
    color: #5d627b;
			background: #fff;
    border-left : solid 5px #5d627b;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.22);
}

.thumb{
    margin: 0 0 15px 10px;
    padding: 4px;
    border: 1px solid #BFBFBF;
	   background: white;
    float: right;
}

blockquote {
    position: relative;
	   margin: 0.7rem 0.5rem;
    box-sizing: border-box;
    font-style: normal;
    background: #fafafa;
	   border-left: 0px;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 13px;
    left: 15px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #5d627b;
    font-size: 28px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 15px 0 0 0;
    margin: 10px 0;
	   font-style: normal;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.8em;
}

h2, h3, h4, h5 {
	font-family: "ゴシックMB101 B", 'Noto Sans CJK JP', 'Noto Sans JP', "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
	font-weight:bold;
}

h4.author {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic,  'Noto Sans JP', Verdana, Meiryo, "M+ 1p", sans-serif;
}

.single-post article h2{
font-family:"ゴシックMB101 B", 'Noto Sans CJK JP', 'Noto Sans JP', "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
font-size: 2.4rem !important; 
border-bottom: solid 3px #CCC;
padding-bottom: 0.3rem;
position:  relative; 
margin: 1em 0 1em !important;
}
.single-post article h2:before {
content:  '';  
width: 4.5rem; 
height: 3px; 
background-color: #CE313D;
display:  block; 
position:  absolute; 
left:  0; 
bottom: -3px; 
}

.single-post article h3{
	font-family:"ゴシックMB101 B", 'Noto Sans CJK JP', 'Noto Sans JP', "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
	background: transparent;
  margin-bottom: 0.8em;
	font-size: 2.0rem !important;
	padding: .5rem .5rem;
}

.single-post article h4{
	font-family:"ゴシックMB101 B", 'Noto Sans CJK JP', 'Noto Sans JP', "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
		background: transparent;
  margin-bottom: 0.8em;
	font-size: 1.7rem !important;
	padding: .5rem .5rem;
}

h1.title, h1.hestia-title, .pricing h2.title, .pricing h2.hestia-title, .contactus h2.title, .contactus h2.hestia-title  {
text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

.page-header.header-small .hestia-title, .page-header.header-small .title, .hestia-title.text-center {
  font-family: 'Noto Serif JP', 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}

.blog .card-blog .card-title, .archive .card-blog .card-title, .blog .hestia-blog-featured-card .card-title, .card-title.entry-title, h4.card-title {
	font-family: 'Noto serif JP', 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
    font-size: 2.2rem;
}

.hestia-blog-featured-card .card-background .card-body .card-description  {
  color: #fff;
}

h1.hestia-title.entry-title {
	-webkit-box-sizing: border-box;
  width: 100%;
  margin: 5%;
  padding: 2rem;
	text-align:left;
}

aside {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #CE313D;
}
aside p {
    margin: 0; 
    padding: 0;
}

.translation{
position:relative;
margin: 2.5em -1em 0.5em;
padding:1.5em 1.2em 0.1em;
    border-radius: 0px 5px 5px 5px;
    background: #f8f8f8;
    background-size: 10px 10px;
    background-attachment: fixed;
}

.translation::after{
position: absolute;
font-family :FontAwesome, Helvetica, sans-serif;
font-weight: bold;
content: '\f15b  Translation';
background: #CE313D;
color: #ffffff;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 6px 10px 5px;
font-size: 0.8em;
line-height: 1;
letter-spacing: 0.05em
}

.tf_translation, .eff_translation, .boingboing {
position:relative;
margin: 5rem -1rem 0.5rem;
padding:1rem 1.5rem 1rem;
border-radius: 0px 1em 1em 1em;
background: #f8f8f8;
}
.tf_translation .box-title {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: 0px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 16px;
    background: #080b0c;
    color: #FFFFFF;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.eff_translation .box-title {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: 0px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 14px;
    background: #f0f0f0;
    color: #1e1e1e;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.boingboing .box-title {
    position: absolute;
    display: inline-block;
    top: -25px;
    left: 0px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 16px; 
font-weight:bold; 
color: #fff;
    background: #cc0000;
    border-radius: 5px 5px 0 0;
}


article blockquote {
    position: relative;
    padding: 2em 1em 1em 1em;
    box-sizing: border-box;
    background: #f3f3f3;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
    margin-bottom: 2.0em;
	  color:#000;
}

article blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -15px;
    width: 40px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    content: "\f10d";
    font-family: FontAwesome;
    color: #FFF;
    font-size: 18px;
    line-height: 30px;
    background: #CE313C;
    box-shadow: 0 2px 2px rgba(26, 26, 26, 0.14);
    font-weight: 900;
}

article blockquote:after{
    position: absolute;
    content: '';
    top: 40px;
    left: -15px;
    border: none;
    border-bottom: solid 8px transparent;
    border-right: solid 15px #AA1722;
}

article blockquote p {
    position: relative;
    font-weight: normal;
    padding: 8px 0 0 0;
    margin: 10px 0;
    z-index: 3;
    line-height: 1.7;
}

article blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.8em;
}

article cite{
display: block;
text-align: right;
font-size: 0.7em;
}

figure{
text-align: center;
display:table; 
margin-top: 40px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}

figcaption{
text-align: center;
font-weight: bold; 
display:table; 
max-width: 100%;
margin:0 auto;
}

div .caption{
text-align: right;
font-size: smaller;
font-style: italic;
margin-top: -10px;
}

.post-content a {
	font-family: "ゴシックMB101 B", 'Noto Sans CJK JP', 'Noto Sans JP', "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif;
}

.npbx p {
    margin: 0; 
    padding: 0;
}

.sfont {
font-size: 0.85em;
}

ol#footnotes {
  font-size: small;
}

.embedly-card{
border-left: solid 2px #CE313D;
}

section.widget_tag_cloud{
font-family: Avenir,"Helvetica Neue","Helvetica","Arial",sans-serif; 
}

.box-title img {
	height: 16px;
}

.wpp-list-category-new {
  list-style: none;
  line-height: 0;
}

.wpp-list-category-new-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}
.wpp-list-category-new-img {
  width: 60px;
}
.wpp-list-category-new-img img {
  border-radius: 50%;
}
.wpp-list-category-new-box a {
  text-decoration: none;
  -webkit-box-shadow: none;
          box-shadow: none !important;
}
.wpp-list-category-new-box img {
  border: solid 1px #333;
  max-width: initial !important;
}
.wpp-list-category-new-text-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
	  font-family: 'Noto Serif JP', "Helvetica","Arial",sans-serif;
}
.wpp-list-category-new-title {
  line-height: 1.6;
  font-weight: bold;
  padding: 0 0 0 10px;
	font-family: 'Noto Serif JP', "Helvetica","Arial",sans-serif;
}
.wpp-list-category-new-category {
  line-height: 1.6;
  font-size: 0.8rem;
  padding: 6px 0 0 10px;
}

div .navbar-toggle-wrapper{
	display:none;
}

.single-post-wrap.entry-content, .card-description.entry-summary, .card-description  {
	color:#0C0C0C;
}

.credit{
	position: relative;
margin: 1.5rem -1rem 1.5rem;
padding:1rem 1.5rem 1rem;
	font-size: 1em;
	font-weight: 300;
	border-radius: 1rem;
	background-image: linear-gradient(45deg, #F7DFEB 25%, #faeaeb 25%, #faeaeb 50%, #F7DFEB 50%, #F7DFEB 75%, #faeaeb 75%, #faeaeb);
	background-size: 10px 10px;
	background-attachment: fixed;
	line-height: 1.5;
}

.credit::before{
	content: "\f040     Credit";
	position: absolute;
	font-family :FontAwesome, Helvetica, sans-serif;
	font-weight: bold;
	right: 0;
	bottom: 0;
	padding: 1px 15px 1px 10px;
	font-size: small;
	background: #CE313D;
	color: #fff;
    border-radius: 1rem 0px 1rem 0px;
}

.credit dl{
  width: 100%;
  overflow: hidden;
  border-top: none;
  font-size: 1em;
  margin-bottom : 0em;
}
.credit dt{
  width: 25%;
  float: left;
  box-sizing: border-box;
	margin-left:1em;
	margin-bottom:-1em;
}
.credit dd{
  margin-left: 10%;
		margin-bottom: 0.3em;
}
.credit dd:after{
  display: block;
  content: "";
  clear: both;
}

@media screen and (max-width: 640px) {
  .credit dt{
    width: 100%;
    float: none;
			margin-left:0em;

  }
  .credit dd{
    margin: 1em 1.5em 0;
    border-left: none;
  }
}